CSS3 3D變換的IE11

Question

我試圖建立一個立方體CSS3 3D轉換不工作..

在這個例子中，我只有2面：

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

與所有其他瀏覽器我得到一個好的結果，但它的怪異與IE 11

我有一個很好的3D平移和旋轉的綠臉（1），但紅色的臉（2）垂直於3D不顯示。這是唯一的紅臉蛋上的綠臉的投影。

你可以看到這個fiddle結果。

PS：我做了100deg的旋轉，而不是90，看到綠色臉上的紅色臉部的投影（如果角度是90，投影是不可見的）。

謝謝大家！

Answer 1

IE不支持transform-style: preserve-3d呢。

您必須從#header-cube中移除變換並將其應用於figure的每一個孩子。不幸的是IE瀏覽器已經使用了非前綴屬性，所以你根本不能使用transform-3d或者必須定義最後的前綴屬性。

從IE transforms documentation：

這時，Internet Explorer的10不支持保留-3D 關鍵字。除了 子元素的常規變換外，還可以通過手動將父元素的變換應用於每個子元素來解決此問題。

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