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

问题描述

我正在尝试使用 CSS3 3D 变换构建一个立方体..

对于这个例子，我只有两张脸:

<div id="header-cube"><图></图><图></图>

</节>

使用其他所有浏览器我都得到了不错的结果，但使用 IE 11 就很奇怪了.

我在绿色面 (1) 上进行了良好的 3D 平移和旋转，但红色面 (2) 的垂直线未在 3D 中显示.只是红脸在绿脸上的投影.

您可以在此 fiddle 上查看结果.

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

谢谢大家！

解决方案

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 {变换风格:preserve-3d；变换:rotateX(43deg)rotateZ(130deg)；}图:第n个孩子(1){变换:translateZ(-16px);}图:第n个孩子(2){变换:rotateY(-100deg) translateZ(-16px);}

变成:

#header-cube {变换风格:preserve-3d；-ms-transform-style:无；变换:rotateX(43deg)rotateZ(130deg)；-ms-transform:无；}图:第n个孩子(1){变换:translateZ(-16px);-ms-transform:rotateX(43deg)rotateZ(130deg)translateZ(-16px);}图:第n个孩子(2){变换:rotateY(-100deg) translateZ(-16px);-ms-transform:rotateX(43deg)rotateZ(130deg)rotateY(-100deg) translateZ(-16px);}

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>

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

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 : 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).

Thank you all!

解决方案

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

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.

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

becomes:

#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 变换在 IE11 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！