CSS3 3D Transform不适用于IE11 [英] CSS3 3D Transform dont work on IE11

问题描述

对于这个例子，我只有两个面孔：

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

与其他浏览器我有一个很好的结果，但它是奇怪的IE 11 ..我有一个好的3D平移和旋转在绿色的脸（1），但红色的脸（2）垂直不显示在3D ..它只是红色的脸在绿色的脸上的投影...

您可以在此 JSfiddle在线代码中查看结果。

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

谢谢大家，对我的英语很抱歉。

解决方案

IE不支持 transform-style：preserve-3d 。

＃header-cube 并将其应用于每个图的孩子。不幸的是，IE已经使用了非前缀属性，所以你不能使用 transform-3d 或者最后定义前缀属性。

从 IE转换文档：

此时，Internet Explorer 10不支持preserve-3d
关键字。你可以通过手动应用父
元素的变换到每个子元素除了
子元素的正常变换。

JSFiddle： http://jsfiddle.net/TTDH7/17/ strong>

 ＃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）; 
} 
  

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

For this exemple I have only 2 faces :

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

With each other browsers I have 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 isn't display on 3D.. It's only the projection of the red face on the green face..

You can see the result on this JSfiddle online code.

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 and sorry for my english.

解决方案

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