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

此处的问题是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/

CSS3翻转在Internet Explorer中不起作用

1 个答案: