CSS3 flip не работает в Internet Explorer

Question

У меня есть div, переворачивающий при нажатии на кнопку, чтобы показать другой div.

<div class="flip-container"> 
    <div class="flipper"> 
     <div class="front"><h1>FRONT</h1></div> 
     <div class="back"><h1>BACK</h1></div> 
    </div> 
</div> 

<button class="flipper-btn">Flip it!</button> 

Работает красиво в хроме, но (конечно) не в IE. Он просто показывает заднюю часть .front div, а не div .back. Я искал ответ и обнаружил, что у некоторых других были проблемы с одним и тем же, но я не смог заставить мои работать.

http://jsfiddle.net/0sypya5h/3/

Надеется, что кто-то может помочь ...

Answer 1

Проблемы здесь в Internet Explorer 11. lack of support for preserve-3d Мы недавно погружено поддержка в http://remote.modern.ie (поддерживаемся на Android, OS X, IOS, Windows, и Windows Phone).

Вы можете ожидать, что это приземлится в предстоящей стабильной сборке. До родные кораблей поддержки вы можете найти больше успеха анимировать оба элемента независимо друг от друга, а не пытаться так в смесительных модах:

.flipped .front { 
    transform: rotateY(180deg); 
} 

.flipped .back { 
    z-index: 1; 
    transform: rotateY(0deg); 
} 

скрипки: http://jsfiddle.net/jonathansampson/wv3rymoe/