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中.这只是红脸在绿脸上的投影.

你可以在这个小提琴上看到结果.

PS:我旋转100度而不是90度,看到红色面在绿色面上的投影(如果角度为90,投影不可见).

谢谢你们!

Answer 1

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

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

从IE转换文档:

目前,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);
}