Chrome 3D CSS transform intersections not rendering properly

Question

I'm trying to recreate this 3D effect as seen on the W3 website.

I've put the code in a jsFiddle but as you can see, the transforms have been applied but the intersection effect is not rendering properly. It doesn't work in Firefox either.

Is this a problem with Chrome, or a problem with the code?

    <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

This is a duplicate of Why does this 3D CSS overlap instead of clip? ... According to that question it's a reported bug in webkit: https://bugzilla.mozilla.org/show_bug.cgi?id=689498:

Bug 689498 - Intersecting planes are not z-ordered properly

Alistair MacDonald 2012-04-12 12:22:25 PDT Safari & Mobile Safari no longer have this problem. The problem still exists in Chrome and Firefox.

Broken: Firefox 14.0a1 (2012-04-12) -Win7 Broken: Chrome 20.0.1096.1 -Win7 Fixed : Safari 5.1.5 (75.34.55.3) -Win7 Fixed : Mobile Safari (last updated over a month ago) -iOs

Link to test-case and screen-grabs: http://f1lt3r.com/code/3d-css-transforms-intersecting-planes-not-clipping/