CSS3 3D 变换在 IE11 上不起作用

我正在尝试使用 CSS3 3D Transform 构建一个立方体..

对于这个例子，我只有两张脸：

<section id="header-cube-container">
    <div id="header-cube">
        <figure></figure>
        <figure></figure>
    </div>
</section>

使用其他所有浏览器我都能得到很好的结果，但 IE 11 却很奇怪。

我在绿色面 (1) 上进行了良好的 3D 平移和旋转，但红色面 (2) 的垂直线未以 3D 形式显示。这只是红脸在绿脸上的投影。

你可以在这个上看到结果fiddle http://jsfiddle.net/TTDH7/16/.

PS：我旋转 100 度而不是 90 度来查看红色面在绿色面上的投影（如果角度为 90 度，则投影不可见）。

谢谢你们！

IE不支持transform-style: preserve-3d yet.

您必须从中删除转换#header-cube并将其应用到每个figure孩子们。不幸的是 IE 已经使用了非前缀属性，所以你不能使用transform-3d或者必须最后定义前缀属性。

来自IE 转换文档 http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#THE_MS_TRANSFORM_STYLE_PROPERTY:

目前，Internet Explorer 10 不支持preserve-3d 关键词。您可以通过手动应用父项来解决此问题 元素对每个子元素的变换 子元素的正常变换。

JSFiddle：http://jsfiddle.net/TTDH7/17/ 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);
}