ie 10 css 3d轉換行爲不同

Question

我試圖在IE10預覽中實現「translateZ」轉換功能，並遇到了一個問題。

因此，只有在變換節點的「直接」父節點具有「-ms-perspective」屬性並且在父節點的父節點設置了「-ms-perspective」屬性時不起作用，它才能正常工作。

任何人都可以建議，如果這是一個錯誤，如果有解決方法。 例如，如果在下面的代碼中，我將「-ms-perspective」應用於「div1」並嘗試在div3上旋轉z，它不起作用。

<div class="div1"> 
    <div class="div2"> 
     Parent 
     <div class="div3"> 
      Child 
     </div> 
    </div> 
</div> 

Answer 1

它出現在Internet Explorer中10.0.8400.0工作得很好，我：

<div class="div1"> 
    <div class="div2"> 
     Parent 
     <div class="div3"> 
      Child Rotated 
     </div> 
    </div> 
</div> 

隨着下面的CSS：

.div1 { 
    margin: 25px 100px; 
    background: #f1f1f1; 
    -ms-perspective: 500px; 
} 

.div3 { 
    width: 100px; 
    height: 100px; 
    background: orange; 
    -ms-transform: rotateZ(30deg); 
} 

產生如下效果：

小提琴：http://jsfiddle.net/jonathansampson/NKZw6/