CSS 3d Transform в IE

Question

Я пытаюсь создать эффект вертикального отражения, но не могу заставить его работать вообще в любой версии IE.

Я попытался добавить сохранение 3d fix в дочерние элементы, но все еще ничего не работает, поэтому я полностью потерялся.

Вот jsfiddle: https://jsfiddle.net/y3x706o3/ Как вы можете видеть, это работает должным образом в хроме и т.д., но в IE нет флипа и обратно цвета от .creation:after проступает поверх изображения.

Есть ли способ заставить это работать в IE? Я уверен, что это будет не то же самое, что хром, но есть ли способ, чтобы изображения перемещались, чтобы полностью смаковать текст? Я тоже хочу посмотреть на альтернативы 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, чтобы убедиться, что работает в каком браузере. Надеюсь, что эта помощь.