在IE 10中缺少preserve-3d属性的解决方法

Question

微软在他们的网站上说

注意W3C规范为此属性定义了preserve-3d的关键字值,表示不执行展平.目前,Internet Explorer 10不支持preserve-3d关键字.除了子元素的法线变换之外,您还可以通过手动将父元素的变换应用于每个子元素来解决此问题.

有人可以举例说明如何应用这个吗？

Answer 1

要使用 创建 3D 对象transform-style: flat，您需要从容器 div 中删除变换：

.object3d {
  transform-style: preserve-3d; // remove to get the flat behavior in all browers
  transform: translateX(80px) rotateY(-35deg); // cut the container transforms.
}

然后，您可能需要展平您的 html 结构，因此带有变换的 div 内没有带有变换的 div。

并在相对变换之前将变换操作（以前位于容器 div 上）粘贴到所有面上。

前：

.object3d__bottom { 
  transform: translateY(50px) rotateX(90deg);
}

后：

.object3d__bottom { 
  transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg);
}

演示： http: //jsbin.com/ICuVihi/17/