Chrome 3D CSS变换交叉点无法正确呈现

Question

我正在尝试重新创建这种3D效果，如W3 website.

所示

我已将代码放在jsFiddle中，但正如您所看到的，已应用变换但交叉效果无法正确呈现。它在Firefox中也不起作用。

这是Chrome的问题，还是代码问题？

    <style>
.container {
    background-color: rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    perspective: 500px;
}
.container > div {
    position: absolute;
    left: 0;
}
.container > :first-child {
    transform: rotateY(45deg);
    background-color: orange;
    top: 10px;
    height: 135px;
}
.container > :last-child {
    transform: translateZ(40px);
    background-color: rgba(0, 0, 255, 0.75);
    top: 50px;
    height: 100px;
}
</style>

<div class="container">
    <div></div>
    <div></div>
</div>

Answer 1

这是Why does this 3D CSS overlap instead of clip?的副本...根据该问题，它是webkit中报告的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=689498：

  

错误689498 - 相交平面未正确排序

     

Alistair MacDonald 2012-04-12 12:22:25 PDT Safari＆amp;移动Safari没有   更长时间有这个问题。问题仍存在于Chrome和   Firefox浏览器。

     

破解：Firefox 14.0a1（2012-04-12）-Win7 Broken：Chrome 20.0.1096.1   -Win7修正：Safari 5.1.5（75.34.55.3）-Win7修正：移动Safari（最近更新一个月前）-iOs

     

链接到测试用例和屏幕抓取：   http://f1lt3r.com/code/3d-css-transforms-intersecting-planes-not-clipping/