CSS3 3D变换不上IE11工作 [英] CSS3 3D Transform dont work on IE11

问题描述

我特林建立与CSS3 3D变换。

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

有关本例，我只有2面：

For this exemple I have only 2 faces :

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

通过相互的浏览器我有一个很好的结果，但它的怪异与IE浏览器11 ..我有一个不错的3D平移和旋转上的绿脸（1），但红色的脸（2）垂直不显示在3D ..它的绿脸。

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

您可以看到此的jsfiddle在线code 的结果。

You can see the result on this JSfiddle online code.

PS：我使100deg而不是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)

感谢大家，对不起我的英语水平。

Thank you all and sorry for my english.

推荐答案

IE不支持变换式：preserve-3D 但

您必须删除＃头-CUBE 变换，并将其应用到每个图的孩子。不幸的是IE浏览器已经使用非prefixed性能，让你无论是不能使用变换的3D 的全部或需要定义prefixed特性最后。

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.

在<一个href="http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#THE_MS_TRANSFORM_STYLE_PROPERTY">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变换不上IE11工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！