CSS 카드 플립 인터넷 익스플로러

Question

나는 이것에 붙어있어 벽돌 벽, 크롬, FF, 사파리 등 모든 작품에서 작동하지만 인터넷 익스플로러에서 뒷면이 아닌 앞면이 보이게된다. 텍스트, 제발 도와주세요! 내가 간과 한 간단한 대답이있을 것이라고 확신하지만, 마감일을 넘기고 필사적으로 이것을 마무리해야합니다. 어떤 도움 :)

CSS에 미리

감사

flip-container { 
perspective: 1000px; 
-webkit-perspective:1000px; 


} 
    /* flip the pane when hovered */ 
.flip-container:hover .flipper, .flip-container.hover .flipper { 
-webkit-transform: rotateY(180deg); 
-ms-transform: rotateY(180deg); 
transform: rotateY(180deg); 
font-family: "Montserrat Alternates regular"; 
text-align: center; 
} 

.flip-container, .front, .back { 
width: 250px; 
height: 250px; 
font-family: "Montserrat Alternates regular"; 

} 

/* flip speed goes here */ 
.flipper { 
-webkit-transition: 0.6s; 
-ms-transition: 0.6s; 
transition: 0.6s; 

-webkit-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
transform-style: preserve-3d; 

position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
-webkit-backface-visibility:hidden; 
-ms-backface-visibility:hidden; 
backface-visibility: hidden; 


margin: auto; 
position: absolute; 
top: 0; 
left: 0; 

} 

/* front pane, placed above back */ 
.front { 
z-index: 2; 
border: 2px solid black; 
border-radius: 30px; 
-moz-border-radius: 30px; 
-khtml-border-radius: 30px; 
-webkit-border-radius: 30px; 
-webkit-transform: rotateY(0deg); 
-ms-transform: rotateY(0deg); 
transform: rotateY(0deg); 
width: 246px; 
height: 246px; 
} 

/* back, initially hidden pane */ 
.back { 
z-index:3; 
background-color: #fff; 
border: 2px solid black; 
     border-radius: 30px; 
     -moz-border-radius: 30px; 
     -khtml-border-radius: 30px; 
     -webkit-border-radius: 30px; 
     width: 246px; 
     height: 246px; 
-webkit-transform: rotateY(180deg); 
-ms-transform: rotateY(180deg); 
transform: rotateY(180deg); 

} 


HTML: 

<div class="grid-element"> 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
<div class="flipper"> 


     <div class="front" style="background: url('images/flip2.jpg');" /> 
    <span style="font-family: 'Montserrat Alternates regular'; 
font-weight:bolder; text-align: center; position: relative; top: 190px; font-size: 
18pt;">Who Are We?</span> </div> 
    <div class="back"> 

<div style="text-align: center; font-family: 'Montserrat Alternates regular';  
font-size: 10pt; position: relative; top: 10px;margin-left:10px; margin-right:10px; 
margin-top:10px;">Founded by writers Kurt McClung and Simon Mackenzie to offer 
complete story solutions for ambitious entertainment in various media: from video 
games to comic books, theater and screen, novels to song writing.</div> 
<img src="images/kurt.png" style="position:absolute; top:155px; left:18px; width:75px; 
height:75px"/> 
<img src="images/simon.png" style="position:absolute; top:155px; left:152px; 
width:75px; height:75px"/> 
    </div> 
</div> 
</div> 
</div> 

Target site : http://www.taliespin.com 

Answer 1

시도 -ms-perspective:1000px를 추가; 뿐만 아니라 다음

flip-container { 
perspective: 1000px; 
-webkit-perspective:1000px; 
} 

에