为什么这个 rotate3d() CSS 转换在 Internet Explorer 10 中不能按预期工作？答案

【问题标题】：Why doesn't this rotate3d() CSS transform work as expected in Internet Explorer 10?为什么这个 rotate3d() CSS 转换在 Internet Explorer 10 中不能按预期工作？
【发布时间】：2013-05-18 04:07:40
【问题描述】：

我正在尝试使用 CSS 变换和过渡来创建“卡片翻转”效果。我使用<div> 代表卡片，并使用两个子<div>s 代表卡片的正面和背面。两个面都绝对位于彼此之上，而后者有一个 180 度的变换可以将其向后翻转。

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

http://jsfiddle.net/sCyLV/1/

效果在 Chrome 和 Firefox（最新版本）中按预期工作。但是，在 IE10 中，卡片似乎在两个轴上都翻转，卡片的背面没有出现在卡片翻转时 - 我只看到正面卡片的背面。有谁知道为什么？

我也很想听听任何替代想法来实现这种效果。唯一的功能要求是这种效果必须在同一方向上可重复 - 即，卡片将在连续循环中翻转，就好像它围绕 y 轴旋转一样。一旦我控制了翻转行为，我将在每次旋转 180 度时动态更换背面的内容，从而在每次转动时都会在其正面显示新内容。

【问题讨论】：

标签： internet-explorer css css-transitions css-transforms

【解决方案1】：

当您在transform 中使用rotateY(180deg) 时，动画会按照我假设的方式工作。

这使您的翻转效果正常工作，但z-index 仍然存在。为了解决这个问题，我刚刚交换了divs 的顺序并单独为sides 设置了动画，而不是作为父项中的一个，因为IE10 似乎与preserve-3d 存在问题。

这是IE10 的小提琴（注意：我已经破坏了其他浏览器，但您只需要复制特定于浏览器的属性）

【讨论】：

太棒了-谢谢@Klors！我试图从我的解决方案中采取迭代步骤，但我无法通过从 rotate3d() 更改为 rotateY(); 来获得直线 y 轴旋转；但是，一旦我单独改变了侧面，效果就开始起作用了。最终，我能够保持
顺序不变并保留 z-index，它适用于 Chrome、Firefox 和 IE10：jsfiddle.net/sCyLV/3 - 再次感谢！