CSS3 RotateY Tile Flip 在 Internet Explorer 中不起作用？

我使用以下代码创建了一个 CSS3 瓷砖翻转效果:

HTML:

<div class="flip-container">
<div class="flipper">
<div class="front img1">
</div>
<div class="back" id="back1"></div> // img1 and back1 are specified in the CSS with the background-image property.
</div>
</div>

CSS:

.flip-toggle.flip .flipper {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.back {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    border: 0;
}

但是，正如 here 所见，效果无法正常工作。在 Chrome、Firefox 和 Safari 上，它会正确显示每个磁贴的背面图像，但 Internet Explorer 只是镜像正面图像。

我该如何解决这个问题？任何帮助将非常感激!

最佳答案

阅读 http://davidwalsh.name/css-flip#ieflip

最后，为了支持 IE10+，您需要将旋转应用于两侧而不是它们的容器.. ( because preserve-3d is not supported )

关于CSS3 RotateY Tile Flip 在 Internet Explorer 中不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23418652/