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上，它会正确显示每个磁贴的背面图像，但Internet Explorer只是镜像前面的图像。

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

Answer 1

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

最后，为了支持IE10 +，您需要将旋转应用于双方而不是其容器..（because preserve-3d is not supported）

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

1 个答案: