CSS3 翻转在 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>

它在 chrome 中工作得很漂亮，但(当然)在 IE 中不行。它只显示 .front div 的背面，而不是 .back div。我搜索了一个答案，发现其他一些人也遇到了同样的问题，但我无法让我的工作。

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

希望有人能帮忙...

Answer 1

这里的问题是 lack of support for preserve-3d在 Internet Explorer 11 中。我们最近在 http://remote.modern.ie 中提供了支持(支持 Android、OS X、iOS、Windows 和 Windows Phone)。

您可以期待它会出现在即将到来的稳定版本中。在 native 支持发布之前，您可能会发现独立地为两个元素设置动画比尝试以复合方式设置动画更成功:

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

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

fiddle :http://jsfiddle.net/jonathansampson/wv3rymoe/