Question

在这个JSFiddle中，为什么Back div会在Chrome和Firefox的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已被翻译为20px的正Z和Back已被翻译为0px，Front应该在前面渲染。

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

Answer 1

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

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

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

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

（注意你可以通过在你的html中反转你的前后div的顺序来获得同样的效果，所以前面的后面渲染）

CSS的TranslateZ变换不会在顶部放置最高的Z值

1 个答案: