css - 即 10 css 3d 变换的行为不同

Question

我试图在 IE10 预览中实现“translateZ”转换功能，但遇到了一个问题。

所以它只有在转换节点的“直接”父节点具有“-ms-perspective”属性时才能正常工作，如果父节点的父节点设置了“-ms-perspective”属性，则它不起作用。

任何人都可以建议这是否是一个错误以及是否有解决方法。例如，如果在以下代码中我将“-ms-perspective”应用于“div1”并在 div3 上尝试 rotateZ，则它不起作用。

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