Пересечения CSS 3D CSS не отображаются должным образом

Я пытаюсь воссоздать этот 3D-эффект, как показано на веб-сайте > .

Я поместил код в 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>

Ответ 1