在IE 10中缺少保留-3d属性的解决方法 [英] Workaround for missing preserve-3d property in IE 10

问题描述

Microsoft在其上说网站

Microsoft says on their website

注意W3C规范为此属性定义了preserve-3d的关键字值，表示不执行展平。此时，Internet Explorer 10不支持preserve-3d关键字。您可以通过手动将父元素的变换应用到子元素的正常变换之外的每个子元素来解决此问题。

Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

推荐答案

要使用创建3D对象transform- style：flat ，您需要删除容器div的转换：

To create 3D objects with transform-style: flat, you'll need to remove the transforms from the container 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结构，

Then you'll might need to flatten your html structure, so no divs with transforms are inside divs with transforms.

将变换操作（以前位于容器div上）粘贴到所有面上，然后将它们相对转换。

And paste the transform operations (that used to be on the container div) on all the faces before their relative transformations.

之前：

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

之后：

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

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

这篇关于在IE 10中缺少保留-3d属性的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！