CSS 的 TranslateZ 转换不会将最高 Z 值放在顶部

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 已在正 Z 方向上翻译了 20px，而 Back 已翻译了 0px，因此 Front 应该呈现在 back 之前。

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

Answer 1

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

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

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

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

(请注意，只需颠倒 html 中前后 div 的顺序即可获得相同的效果，因此前部在后部呈现)