为什么IE10无法显示嵌套的CSS3 3D转换元素？

Question

为什么IE10无法显示嵌套的CSS3 3D转换元素？

7

我有点迷失了，我正在测试随Windows 8 Release Preview一起提供的IE10（10.0.9200.16384），但我遇到了很大的困难。其中一个困扰我的问题是，IE似乎无法正确处理嵌套的3D转换。请查看这个fiddle：

有两个有颜色的div，一个红色的和一个绿色的，它们被旋转和平移，以便它们充当长方体的顶部，而这个长方体本身也被旋转和平移（请注意，我不能仅使用旋转来使用transform-origin，因为在Webkit中它是/曾经是有缺陷的...以防万一这可能是可能修复的一部分）。它应该看起来像这样：

在Chrome和Firefox中按预期工作，但在IE10中绿色的div消失了。

有人知道我是否漏掉了什么，或者这可能是一个错误吗？

- ndm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1702500 · Accepted Answer

6

IE10不支持以下内容：

transform-style: preserve-3d;

- user1702500

2

Hmpf...现在这是一些严重的缺点 <_< 有了这个提示，我已经找到了以下内容： http://goo.gl/cw4Uy 因此，唯一的解决方法是将父级转换应用于所有子元素以及它们的常规转换-万岁。我怎么能如此愚蠢，我真的以为这些日子终于过去了，但显然Microsoft不想打破IE特殊处理的惯例。 - ndm

不过，别说废话了，感谢您的回答，如果有人对此感兴趣，这里是可行的解决方法：http://jsfiddle.net/uUHdF/2/ 它只适用于IE，否则可能会触发一些webkit版本中存在的transform-origin漏洞：https://bugs.webkit.org/show_bug.cgi?id=88587 - ndm

他是对的。http://msdn.microsoft.com/zh-cn/library/ie/hh772282(v=vs.85).aspx MSDN目前只列出了transform-style属性的可能值为"flat"。这也让我感到失望。 - caiosm1005

1

你能详细说明一下你的解决方案吗？我想仅仅从父对象中移除 transform-style 并不足够。例如在使用 Three.JS 时，它会为你嵌套对象，那么该怎么做呢？ - Micros

1

这不仅仅是令人恼火的问题。这是一个严重的缺陷，即使在IE11中仍然存在。 - Andrew Gee