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

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

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

Это дубликат Почему этот 3D-CSS перекрывается вместо клипа?... Согласно этому вопросу, это сообщение об ошибке в webkit: https://bugzilla.mozilla.org/show_bug.cgi?id=689498:

Ошибка 689498 - плоскости пересечения не являются z-упорядоченными должным образом

Alistair MacDonald 2012-04-12 12:22:25 PDT Safari и Mobile Safari нет дольше эта проблема. Проблема все еще существует в Chrome и Firefox.

Сбой: Firefox 14.0a1 (2012-04-12) -Win7 Сломанный: Chrome 20.0.1096.1 -Win7 Исправлено: Safari 5.1.5 (75.34.55.3) -Win7 Исправлено: Mobile Safari (последнее обновление более месяца назад) -iOs

Ссылка на тестовый экран и скрининг: http://f1lt3r.com/code/3d-css-transforms-intersecting-planes-not-clipping/