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

Question

我使用以下代码创建了一个 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 上，它可以正确显示每个图 block 的背面图像，但 Internet Explorer 只是镜像正面图像。

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

Answer 1

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

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