2

在这个JSFiddle中，为什么在 Chrome 和 Firefox 上 Back div 呈现在 Front div 前面？在 Mobile Safari 中，Front 呈现在 Back 的前面。

的HTML

    <div id='view'>
        <div id='front' class='transformed'>Front</div>
        <div id='back' class='transformed'>Back</div>
    </div>

和 CSS

    div#view {
        -webkit-perspective: 100px;
        -moz-perspective: -100px;
    }

    div.transformed {
        position:absolute;
        width: 100px;
        height: 100px;
        left: 100px;
        top: 100px;
    }

    div#front {
        background-color: red;
        -webkit-transform: translateZ(20px);
        -moz-transform: translateZ(20px);
    }

    div#back {
        background-color: rgba(0, 0, 255, 0.5);
        -webkit-transform: translateZ(0px);
        -moz-transform: translateZ(0px);
    }

我的期望是，由于 Front 已在正 Z 方向平移 20px，Back 已平移 0px，因此 Front 应该在前面渲染。

这是一个错误，还是我错过了什么？

4

1 回答 1

3

这可以说是一个错误。虽然您不需要，但您可以添加：

    -webkit-transform-style: preserve-3d;

到视图 div 踢其他浏览器做正确的事情。可能是使用没有保留 3d 的透视图会使它们混淆，并使它们按文档顺序而不是 z 顺序呈现。

见jsfiddle：http: //jsfiddle.net/VMbKk/4/

（请注意，您可以通过颠倒 html 中前后 div 的顺序来获得相同的效果，因此前面呈现在后面之后）

于 2012-11-19T03:59:28.183 回答