CSS CSS3 3D 变换在 IE11 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22848328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 3D Transform doesn't work on IE11
提问by Arthur
I'm trying to build a cube with CSS3 3D Transform..
我正在尝试使用 CSS3 3D 变换构建一个立方体..
For this example I have only 2 faces :
对于这个例子，我只有两张脸：
<section id="header-cube-container">
<div id="header-cube">
<figure></figure>
<figure></figure>
</div>
</section>
With every other browser I get a good result, but it's weird with IE 11.
使用其他所有浏览器我都得到了不错的结果，但使用 IE 11 就很奇怪了。
I have a good 3D translate and rotate on the green face (1), but the red face (2) perpendicular doesn't display in 3D. It's only the projection of the red face on the green face.
我在绿色面 (1) 上有一个很好的 3D 平移和旋转，但红色面 (2) 垂直不显示在 3D 中。只是红脸在绿脸上的投影。
You can see the result on this fiddle.
你可以在这个fiddle上看到结果。
PS : I make a rotation of 100deg and not 90 to see the projection of the red face on the green face (if the angle was 90, the projection isn't visible).
PS：我旋转 100 度而不是 90 度以查看红色面在绿色面上的投影（如果角度为 90，则投影不可见）。
Thank you all!
谢谢你们！
回答by Aleksander Bavdaz
IE doesn't support transform-style: preserve-3dyet.
IE 尚不支持transform-style: preserve-3d。
You have to remove the transform from #header-cubeand apply it to each of the figurechildren. Unfortunately IE already uses the non-prefixed properties, so you either can't use transform-3dat all or have to define the prefixed properties last.
您必须从中删除转换#header-cube并将其应用于每个figure子项。不幸的是，IE 已经使用了非前缀属性，因此您要么根本无法使用transform-3d，要么必须最后定义前缀属性。
From the IE transforms documentation:
来自IE 转换文档：
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.
目前，Internet Explorer 10 不支持preserve-3d 关键字。除了子元素的正常变换之外，您还可以通过手动将父元素的变换应用于每个子元素来解决此问题。
JSFiddle: http://jsfiddle.net/TTDH7/17/
JSFiddle：http: //jsfiddle.net/TTDH7/17/
#header-cube {
transform-style: preserve-3d;
transform: rotateX(43deg) rotateZ(130deg);
}
figure:nth-child(1) {
transform: translateZ(-16px);
}
figure:nth-child(2) {
transform: rotateY(-100deg) translateZ(-16px);
}
becomes:
变成：
#header-cube {
transform-style: preserve-3d;
-ms-transform-style: none;
transform: rotateX(43deg) rotateZ(130deg);
-ms-transform: none;
}
figure:nth-child(1) {
transform: translateZ(-16px);
-ms-transform: rotateX(43deg) rotateZ(130deg)
translateZ(-16px);
}
figure:nth-child(2) {
transform: rotateY(-100deg) translateZ(-16px);
-ms-transform: rotateX(43deg) rotateZ(130deg)
rotateY(-100deg) translateZ(-16px);
}
