css - CSS3透视属性在IE10中不起作用

Question

我尝试在IE10中制作翻页效果。

因为 IE10 不支持transform-style: preserve-3d; 我必须分别翻转每一面。它在最近的浏览器中运行良好，但在 IE10 中没有透视。如果我
perspective: 1000px;
在容器（.flipper）中写入，则背面可见性/z-index 无法正常工作。

看看 tis jsfiddle：http: //jsfiddle.net/wG6gk/2/

Answer 1

我不知道为什么你xpersepective的 CSS 中有，IE10 在 CSS 中没有前缀，但是透视属性必须有某种深度单位，perspective: 1000不会应用，因为浏览器不知道它所在的单位，同样像宽度和高度等，您必须应用 px、em 等。唯一假定perspective属性单位（和像素）的浏览器是 Webkit 浏览器，并且只有当它在transform属性内时。

如果你做一点研究，微软表示：

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 事件，在动画开始时，它会找到动画的持续时间并使用它来计算动画的中途，所以当动画中途时，它会backface-visibility变为visible，这样动画像它应该的那样平滑过渡。

开发起来很痛苦，IE10 有点不一致，因为第一次处理它需要时间（可能是 jQuery）。注意缓解，没有头痛和火红的眼睛。你周围的空气变得凉爽了，你终于可以呼吸了，因为现在你并不孤单。

编辑：我忘了补充，如果你的动画或过渡有不同的时间，这个脚本中的时间将不得不调整，因为它只适用于线性过渡，截至目前......