CSS3 3d-преобразования - перекрывающиеся div с разными z-индексами имеют разные результаты для браузеров webkit

Question

Я пытаюсь выяснить, какой браузер не реализует это право: у меня есть 2 элемента div, расположенных друг над другом. Для передней я поворачиваю ось Y и перевожу ось X. Теперь для этого самого я установил более низкий z-индекс, чем другой. Я вижу 2 разных выхода для Chrome / Safari. Какой из них имеет больше смысла. Вот мой тест: http://jsfiddle.net/f5VWN/

Полагаю, проблему можно сократить до: Учитывая 2 элемента в трехмерном пространстве, имеет ли значение z-index вообще :)?

Answer 1

Согласно спецификации :

Положение на оси Z преобразованного элемента не влияет заказ в контексте наложения.

Safari отображает его неправильно. Однако, несмотря на это, я бы не сделал ваш макет зависимым от этой техники.

Answer 2

Потомки элемента по умолчанию сглаживаются в плоскости родителя, поэтому передние и задние делители не разделяют одно и то же трехмерное пространство.Они просто преобразуются и кладутся поверх контейнера div по отдельности, что приводит к тому, что задний div рисуется поверх переднего div.Чтобы преобразовать элементы в одном и том же трехмерном пространстве, предоставив трехмерное перекрытие дочерним элементам div, установите для свойства -webkit-transform-style значение preserve-3d в контейнере: http://jsfiddle.net/f5VWN/2/

Z-индекс по-прежнему имеет значение, особенно когдадва элемента перекрывают друг друга.