IE中的CSS 3d轉換

Question

我正在嘗試創建垂直翻轉效果，但無法使其在任何版本的IE中都能正常工作。

我嘗試將保留3d修補程序添加到子元素，但是仍然沒有任何效果，因此我現在完全迷失了。

這是一個jsfiddle： https ://jsfiddle.net/y3x706o3/如您所見，它在chrome等中正常運行，但在IE中沒有翻轉和.creation:after的背景色.creation:after顯示在圖像頂部之后。

有什么辦法可以使它在IE中工作？ 我敢肯定它不會與chrome相同，但是有沒有辦法讓圖像移動到完全隱藏下面的文本的位置？ 我也願意看看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

嘗試添加帶有-ms-前綴的CSS樣式屬性。 例如：

.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上進行檢查，以確保哪種瀏覽器可以工作。 希望對您有所幫助。