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

Question

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

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

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

对于其他所有浏览器，我都得到了很好的结果，但对于 IE 11，这很奇怪。

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

您可以在此fiddle 上查看结果。

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

谢谢大家！

Answer 1

IE 还不支持transform-style: preserve-3d。

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

来自IE transforms documentation：

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

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);
}

变成：

#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);
}