css - 背面可见性在 IE10 中不起作用 - 在 webkit 中工作正常

Question

我正在构建一个简单的纯 CSS '卡片翻转' 动画，它必须在 IE10 中工作，但遗憾的是我写的内容没有。

我可以从他们的演示中看到背面可见性在 IE10 中有效，所以也许我只是忽略了一些愚蠢的事情，也许一双新的眼睛可能会有所帮助！

提前致谢！

score 7 · Accepted Answer

好吧，一些 Microsoft IE 开发人员看到了我的推文并已经加入了修复程序！

显然 IE10 不支持 preserve-3d，他们掀起了这个 jsFiddle 演示

非常感谢@reybango和@sgalineau的帮助 - 非常感谢。

score 3 · Accepted Answer

我只将背面可见性应用于子元素，IE10 无论如何都会显示背面。删除 preserve-3d 会破坏 3d 动画的主要视觉功能之一，因此它并不是真正可行的解决方法。

不幸的是，@reybango 和@sgalineau 提到的演示将效果外观从 3d 旋转更改为简单的 2d 宽度变化，因此这也不是一个可行的解决方法。

底线是 IE10 需要升级以支持所写的 CSS 3d 动画规范。

score 3 · Accepted Answer

当应用于元素本身时，背面可见性在 IE10 上有效（如果应用于父元素，它将不起作用）。您应该将它组合在同一个变换属性中，如下所示：

。背部{
  变换：透视（1000px）旋转Y（0度）；
}
。正面{
  变换：透视（1000px）旋转Y（180度）；
}

score 2 · Accepted Answer

（这是为了评论为什么微软的 360° 转弯示例有效。）

首先看一下示例本身，MS 的解决方法从初始代码中删除了 preserve-3d transform-style 属性。

结果 IE10 不支持 preserve-3d，他们在 msdn 上建议了这样的解决方法：

将变换样式设置为默认的“平面”值，子元素将继承父旋转。因此，卡片正面/背面都旋转到 360°（= 0°），这里的技巧是背面将出现在顶部，因为它在 DOM 中稍后出现。

为了让这一点更加明显，我opacity:0.5在两个示例的背面都添加了，现在您可以看到真正发生了什么：

所以 MS 方式在某些场景下会起作用，但并非所有场景都没有真正支持 preserve-3d

score 0 · Accepted Answer

我在 IE 11 和 Chrome 上试过。它就像一个翻盖盒。

5 回答 5