在IE10中不能正常工作的后侧可视性 - 在webkit中运行良好

Question

我正在构建一个简单的纯css'卡片翻转'动画，它有在IE10中工作，但遗憾的是我写的不是。

jsFiddle demo here或sample html zip here

我可以看到来自their demo here的IE10中的背面可见性是可行的，所以也许我只是忽略了一些愚蠢的东西，也许一双新眼睛可能有帮助！

提前致谢！

Answer 1

一些微软IE开发人员看到了我的推文，并已经修好了一段时间！

显然IE10不支持preserve-3d，他们掀起了this jsFiddle demonstration

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

Answer 2

这似乎与CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

重复

当它应用于元素本身时，背面可见性正在IE10上工作（如果应用于父元素，它将无法工作）。您应该将它组合在相同的转换属性中，如下所示：

.back{
  transform : perspective(1000px) rotateY(0deg);
}
.front{
  transform : perspective(1000px) rotateY(180deg);
}

Answer 3

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

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

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

Answer 4

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

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

原来IE10不支持preserve-3d ，他们建议在msdn上使用这样的解决方法：

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property

将transform-style设置为默认的'flat'值，子元素将继承父旋转。因此，卡片正面/背面都旋转到360°（= 0°），这里的技巧是背面将出现在顶部，因为它会在DOM中出现。

为了使这一点更加明显，我在后面添加了opacity:0.5两个示例，现在您可以看到实际情况：

http://jsfiddle.net/7FeEz/12/

http://jsfiddle.net/ax2Mc/71/

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

Answer 5

这是我的解决方案。 http://jsfiddle.net/UwUry/531/

我试过IE 11和Chrome。它像翻转盒一样工作。