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

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

对于这个例子我只有2个面孔：

<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°,投影不可见).

谢谢你们！

解决方法

IE不支持transform-style：preserve-3d.

您必须从#标题多维数据集中删除变换,并将其应用于每个图形子项.不幸的是,IE已经使用非前缀属性,所以你根本不能使用transform-3d,或者必须最后定义前缀属性.

从IE transforms documentation：

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.

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

原文地址：https://www.jb51.cc/css/214147.html