CSS3 3D变换的IE11

Question

我试图建立一个立方体CSS3 3D转换不工作..

在这个例子中，我只有2面：

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

与所有其他浏览器我得到一个好的结果，但它的怪异与IE 11

我有一个很好的3D平移和旋转的绿脸（1），但红色的脸（2）垂直于3D不显示。这是唯一的红脸蛋上的绿脸的投影。

你可以看到这个fiddle结果。

PS：我做了100deg的旋转，而不是90，看到绿色脸上的红色脸部的投影（如果角度是90，投影是不可见的）。

谢谢大家！

Answer 1

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

您必须从#header-cube中移除变换并将其应用于figure的每一个孩子。不幸的是IE浏览器已经使用了非前缀属性，所以你根本不能使用transform-3d或者必须定义最后的前缀属性。

从IE transforms documentation：

这时，Internet Explorer的10不支持保留-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); 
}