javascript - IE 中的 CSS 3d 变换

Question

我正在尝试创建垂直翻转效果，但在任何版本的 IE 中都无法正常工作。

我尝试将保留 3d 修复添加到子元素，但仍然没有任何效果，所以我现在完全迷路了。

这是一个 jsfiddle:https://jsfiddle.net/y3x706o3/ 如您所见，它在 chrome 等中正常工作，但在 IE 中没有翻转，.creation:after 的背景颜色显示在图像顶部。

有什么方法可以让它在 IE 中工作？我确定它不会与 chrome 相同，但是有没有办法让图像移动以完全 Revel 下面的文字？我也愿意查看 javascript 替代品。

HTML

        <div class='flip-container left-section'>
            <div class='creation'>
                <div class='front'>
                    <div class='cont'>
                        <img src="http://lorempixel.com/246/300/" alt="blah blah">
                    </div>
                </div>
            </div>
        </div><!-- 
         --><div class='flip-container right-section'>
            <div class='creation'>
                <div class='front'>
                    <div class='cont'>
                        <img src="http://lorempixel.com/574/300/" alt="blah blah">
                    </div>
                </div>
            </div>
        </div>

        <div class="back">
            <div class="left-section">
                <h3>Blah</h3>
                <p>hjsad sahjkd kjwdakjkjw dakj wdakjh dwa</p>
            </div>
            <div class="right-section">
                <h3>Foobar</h3>
                <p>jkhwejkadwjh d wa jdwwd jkwdj wd ajk wdkjdewkjljdkwejwd jdwajdwakj ljlk dwa</p>
            </div>
        </div>

        <div class="clearfix"></div>

    </div>

CSS

.flip-container {
      -webkit-perspective:1200;
      -moz-perspective:1200;
      perspective:1200;
      display: inline-block;
      z-index: 400;
      position: relative;
      -webkit-transition:all 0.6s;
      -moz-transition:all 0.6s;
      transition:all 0.6s;
    }
    .left-section {
        width: 30%;
        float: left;
    }
    .right-section {
        width: 70%;
        float: left;
    }
    .flip-container:hover {
        z-index: 998;
    }
    .flip-container:hover .creation {
      -webkit-transform:rotateX(90deg);
      -moz-transform:rotateX(90deg);
    }
    .creation {
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
      width:100%;
      float:left;
      -webkit-transition:all 0.6s;
      -moz-transition:all 0.6s;
      transition:all 0.6s;
      -webkit-transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
      transform-style:preserve-3d;
    }
    .front {
      -webkit-backface-visibility:hidden;
      -moz-backface-visibility:hidden;
      backface-visibility:hidden;
    }
    .creation:after {
        content: '';
        right: 0px;
        bottom: 0px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #808080;
        -webkit-transform: rotateY( 180deg );
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    .creation p {
      color:#666;
      display:block;
      width:auto;
      text-align:center;
      line-height:184px;
      margin:0 30px;
      font-size:20px;
      text-transform:uppercase;
      text-shadow:1px 1px 1px #999;
      font-family:sans-serif;
    }
    .creation p span {
      vertical-align:middle;
      display:inline-block;
      line-height:1.4;
    }
    .cont {
      width:100%;
    }
    .cont img {
        width: 100%;
        display: block;
    }

    .flipbook-cont {
        position: relative;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }
    .flipbook-cont.fold {
        margin-top: 25px;
    }
    .flipbook-cont.flip {
        margin: 50px auto;
        -webkit-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
        -moz-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
        box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
    }
    .flipbook-cont.fold img {
        display: block;
        width: 100%;
    }
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 25px 0;
        background-color: white;
    }
    .back .left-section {
        padding: 0 40px;
    }
    .back .right-section {
        padding: 0 40px;
    }

    @media all and (max-width: 698px) {
        .flipbook-cont {
            display: none;
        }
    }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* {
  box-sizing: border-box;
}

Answer 1

尝试在您的 css 样式属性中添加 -ms- 前缀。例如:

.flip-container {      
     -ms-perspective:1200;
    -ms-transition:all 0.6s;
}
.flip-container:hover .creation {
      -ms-transform:rotateX(90deg);
}
.creation {
      -ms-transform-style:preserve-3d;
      -ms-transform-origin: 50% 0;
      -ms-transition:all 0.6s;

}
.front {
      -ms-backface-visibility:hidden;
}
.creation:after {
        -ms-transform: rotateY( 180deg );
        -ms-transform-style: preserve-3d;
        -ms-backface-visibility: hidden;
}

您可以在 caniuse.com 上查看以确保在哪个浏览器中工作。 希望对您有所帮助。