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/