我正在构建一个简单的纯 css '卡片翻转'动画，它必须在 IE10 中工作，但遗憾的是我写的不是。
jsFiddle demo here 或 sample html zip here
我可以从their demo here 看到背面可见性在 IE10 中有效，所以也许我只是忽略了一些愚蠢的事情，也许一双新的眼睛可能会有所帮助！
提前致谢！
【问题讨论】：
标签： css css-transitions css-transforms internet-explorer-10
好吧，一些 Microsoft IE 开发人员看到了我的推文并已经加入了修复程序！
显然IE10不支持preserve-3d，他们掀起了this jsFiddle demonstration
非常感谢 @reybango 和 @sgalineau 的帮助 - 非常感谢。
【讨论】：
px 添加到透视值，透视就会起作用，但它会像疯了一样旋转。 （Windows 7 上的 IE 10.0.9200.16438）
这似乎与CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround 重复
当它应用于元素本身时，背面可见性在 IE10 上有效（如果应用于父元素，它将不起作用）。您应该像这样将它组合在同一个转换属性中：
。背部{ 变换：透视（1000px）旋转Y（0度）； } 。正面{ 变换：透视（1000px）旋转Y（180度）； }【讨论】：
我只对子元素应用了背面可见性，IE10 无论如何都会显示背面。删除 preserve-3d 会破坏 3d 动画的主要视觉功能之一，因此它并不是真正可行的解决方法。
不幸的是，@reybango 和@sgalineau 上面提到的演示将效果外观从 3d 旋转更改为简单的 2d 宽度变化，因此这也不是一个可行的解决方法。
底线是 IE10 需要升级以支持所写的 CSS 3d 动画规范。
【讨论】：
（这是为了评论为什么微软的 360° 转弯示例有效。）
首先看一下示例本身，MS 的解决方法从初始代码中删除了 preserve-3d 变换样式属性。
原来 IE10 不支持 preserve-3d，他们建议在 msdn 上使用这样的解决方法：
将 transform-style 设置为默认 'flat' 值，子元素将继承父旋转。因此卡片正面/背面都旋转到 360° (= 0°)，这里的技巧是背面将出现在顶部，因为它在 DOM 中出现。
为了让这一点更加明显，我在两个示例的背面都添加了opacity:0.5，现在您可以看到实际情况：
所以 MS 方式在某些情况下可以工作，但并非所有情况下都没有真正支持 preserve-3d
【讨论】：
这是我的解决方案。 http://jsfiddle.net/UwUry/531/
我在 IE 11 和 Chrome 上试过。它就像一个翻盖盒。
【讨论】：