Internet explorer 为什么'；在InternetExplorer10中，这个rotate3d（）CSS转换是否能像预期的那样工作？

我正在尝试使用CSS变换和转换创建“卡片翻转”效果。我用一个

来表示卡，用两个子

来表示卡的正面和背面。两个面绝对位于彼此的顶部，后者具有180度变换以将其向后翻转

我创建了一个JSFIDLE来说明我当前的方法：

效果与Chrome&Firefox（最新版本）中的预期一致。然而，在IE10中，卡在两个轴上都会翻转，并且卡的背面不会在卡翻转时出现-我只看到了前卡的背面。有人知道为什么吗

---

我也希望听到任何其他的想法来达到这个效果。唯一的功能要求是，这种效果必须在同一方向上重复-即，卡将在连续循环中翻转，就像它绕y轴旋转一样。一旦我控制了翻转行为，我将在每次180度旋转时动态交换背面的内容，导致每次旋转时新内容都显示在它的脸上。

当您在

变换
中使用
旋转（180度）
时，动画将按照我的设想工作

这样可以使翻转效果正常工作，但z索引仍处于禁用状态。为了解决这个问题，我刚刚交换了
div
s的顺序，并单独设置了
侧
s的动画，而不是作为父级中的一个，因为IE10似乎存在
preserve-3d
的问题

这是你的提琴（注意：我已经破坏了其他浏览器，但你只需要复制浏览器特定的属性）
Awesome-谢谢@Klors！我试着从我的方法到你的解决方案中采取迭代步骤，但仅仅通过从rotate3d（）更改为rotateY（），我无法得到一个直的y轴旋转；但是，一旦我分别改变了两边，效果就开始起作用了。最终，我能够保持顺序不变，并保留z-index，它在Chrome、Firefox和IE10中都能工作：-再次感谢！