CSS3 3D Transform在IE11上不起作用 [英] CSS3 3D Transform doesn't work on IE11

问题描述

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

I'm trying to build a cube with CSS3 3D Transform..

对于此示例，我只有两张面孔：

For this example I have only 2 faces :

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

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

With every other browser I get a good result, but it's weird with IE 11.

我有一个很好的3D平移并在绿色面上旋转（1），但红色面（2）垂直不显示在3D中。这只是红脸在绿脸上的投影。

I have a good 3D translate and rotate on the green face (1), but the red face (2) perpendicular doesn't display in 3D. It's only the projection of the red face on the green face.

您可以在此小提琴上查看结果。

You can see the result on this fiddle.

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

PS : I make a rotation of 100deg and not 90 to see the projection of the red face on the green face (if the angle was 90, the projection isn't visible).

谢谢大家！

推荐答案

IE没有' t支持 transform-style：preserve-3d 尚未。

IE doesn't support transform-style: preserve-3d yet.

您必须从<$ c $中删除转换c>＃header-cube 并将其应用于每个数字子项。不幸的是，IE已经使用了非前缀属性，因此您要么根本不能使用 transform-3d ，要么必须最后定义前缀属性。

You have to remove the transform from #header-cube and apply it to each of the figure children. Unfortunately IE already uses the non-prefixed properties, so you either can't use transform-3d at all or have to define the prefixed properties last.

来自 IE转换文档：

目前，Internet Explorer 10不支持preserve-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/

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

这篇关于CSS3 3D Transform在IE11上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！