CSS3 3D Transform并不适用于IE11

Question

我正在尝试使用CSS3 3D Transform构建一个多维数据集..

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

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

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

我有一个很好的3D平移并在绿色面（1）上旋转，但红色面（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);
}