我正在尝试用
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,或者必须最后定义前缀属性.
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);
}
