我尝试在IE10中制作翻页效果。
因为IE10不支持transform-style: preserve-3d;
我必须分别翻转每一面。它在最近的浏览器中运行良好，但在 IE10 中没有透视。
如果我在容器（.flipper）中写 perspective: 1000px;
，则背面可见性/z-index 无法正常工作。
看看 tis jsfiddle： http://jsfiddle.net/wG6gk/2/
【问题讨论】：
标签： css css-transforms perspective internet-explorer-10
我不知道为什么你的 CSS 中有 xpersepective，IE10 在 CSS 中没有前缀，但是透视属性必须有某种深度单位，perspective: 1000 不会被应用，因为浏览器没有不知道它是什么单位，类似于宽度和高度等，您必须应用 px、em 等。唯一在 perspective 属性上假定单位（和像素）的浏览器是 Webkit 浏览器，并且仅当它位于transform 属性内。
如果你做一点研究，Microsoft states:
W3C 规范为此属性定义了一个关键字值preserve-3d，表示不进行展平。目前，Internet Explorer 10 不支持 preserve-3d 关键字。除了子元素的正常变换之外，您可以通过手动将父元素的变换应用于每个子元素来解决此问题。
所以现在，如果你想走这条路，你只需要实施建议的修复。
如果没有，你很幸运。我花了一些时间试图让它顺利过渡。在我看来，最初在你的小提琴中，你的转换非常笨拙并且样式太多，所以这个 JSfiddle 中的技术应该会有所帮助：http://jsfiddle.net/NAy2r
所以基本上前面的内容存在于容器div中，而后面的内容存在于后面的div中，后面的div存在于容器的div中。这与 Apple 的 HTML5 Card 翻转演示非常相似，但在 backface-visibility 方面存在一个转折。
在 Apple 发布该演示时，backface-visibiity 无法在 Chrome 或 Firefox 上运行。 Chrome有一些透视的概念，但backface-visibility没有，所以当你翻转一个元素时，你仍然会看到背面，背面的内容也会从两边显示出来；但是在 Safari 上，它会是完美的，因为它最初理解了这些概念。
在随后几个月对 Chrome 的进一步更新中，Chrome 理解了该属性，但是它是按字面意思应用的，并且背面被完全隐藏，不管你是否翻转它！如果无论如何都要完全隐藏背部，那么拥有这个属性又有什么意义呢？如果你愿意，你可以申请display:none等来显示背部！
这就是 IE 目前所处的位置，它也不像其他现代浏览器那样识别元素的“背面”（带有transform:rotateY(180deg) 的元素被认为是背面）。因此，当元素被翻转时，backface-visibilty: hidden 的字面意思就和 Chrome 中的一样！
所以这个小提琴监听容器 div 上的 AnimationStart 事件，在动画开始时，它会找到动画的持续时间并使用它来计算动画的中途，所以当动画中途时，它会改变 @ 987654333@ 到 visible，这样动画就会像它应该的那样平滑过渡。
开发起来很痛苦，IE10 有点不一致，因为第一次处理它需要时间（可能是 jQuery）。注意缓解，没有头痛和火红的眼睛。你周围的空气变得凉爽了，你终于可以呼吸了，因为现在你并不孤单。
编辑：我忘了补充，如果你的动画或过渡有不同的时间，这个脚本中的时间必须调整，因为它只适用于线性过渡，截至目前...
【讨论】：