IE中的CSS 3d變換

Question

我試圖創建一個垂直翻轉效果，但無法讓它在任何版本的IE中都能正常工作。

我試着將保留的3d修復添加到子元素，但仍然沒有工作，所以我現在完全失去了。

這裏是一個的jsfiddle：https://jsfiddle.net/y3x706o3/ 正如你所看到的，它工作正常鉻等，但在IE沒有翻轉，並從.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以確定哪些瀏覽器適用於哪些瀏覽器。 希望得到這個幫助。