Transform-Style preserve-3d в Internet explorer CSS не работает

Question

У меня есть сайт Работа в Opera Chrome и Firefox, но он перепутался с функцией сохранения-3d в Internet Explorer.

Есть ли способ исправить это только для кода браузера Internet Explorer и оставить код других браузеров, как сейчас?

я надеюсь это возможно.

Css:

.back img{ 
     max-width: 90%; 
     height: auto; 
     margin: 1em; 
     overflow: hidden; 
} 

.front{ 
    margin-top: 0.2em; 
    height: 100%; 
    width: 100%; 
    line-height: 1.2; 
    margin-left: 0.2em; 
    margin-right: 0.2em; 
} 


/*Container flip*/ 


/* flip the pane when clicked */ 
.flip .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper { 
     transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
} 

/* flip speed goes here */ 
.flipper { 
     transition: 0.8s; 
     transform-style: preserve-3d; 
} 

/* hide back of pane during swap */ 
.front, .back { 
     backface-visibility: hidden; 
     top: 0; 
     left: 0; 
} 

/* front pane, placed above back */ 
.front { 
     /* for firefox 31 */ 
     transform: rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
     position:absolute; 
     margin-top: 1.2em; 
     margin-bottom: 1.2em; 
     margin-left: 20px; 
     overflow: auto; 
     word-break: normal; 
     width: 90%; 

     color: black; 
} 

/* back, initially hidden pane */ 
.back { 
     transform: rotateY(180deg); 
} 

HTML:

<div class="flip-container flip"> 
<div class="flipper"> 
    <div class="back"> 
    <img src="imgsource.png"> 
    </div> 
    <div class="front"> 
    <p>Some text</p> 
    </div> 
</div> 
</div> 

<div class="flip-container flip"> 
<div class="flipper"> 
    <div class="back"> 
    <img src="imgsource.png"> 
    </div> 
    <div class="front"> 
    <p>Some text</p> 
    </div> 
</div> 
</div> 

<div class="flip-container flip"> 
<div class="flipper"> 
    <div class="back"> 
    <img src="imgsource.png"> 
    </div> 
    <div class="front"> 
    <p>Some text</p> 
    </div> 
</div> 
</div> 

Если вы нажмете на класс .flip-контейнер, в котором .flip класс получает удаляется и текстовое поле будет отображаться с хорошим эффектом. Это не работает в Internet Explorer.

Спасибо за помощь!

Answer 1

Это Александр Бавдаз, дает ответ и исправление здесь:

К сожалению, IE уже использует в не-приставкой свойства, так что вы либо не можете использовать спектрально-3d вообще или нужно определить свойства с префиксами последние ,

CSS3 3D Transform doesn't work on IE11