Ответ 1
В соответствии с spec:
Положение на оси Z преобразуемого элемента не влияет порядок в контексте стекирования.
Safari неверно отображает его. Однако, независимо от того, я бы не сделал ваш макет зависимым от этой техники.
CSS3 3d transforms - Перекрытие divs с разными z-индексами имеет разные результаты для браузеров webkit
Я пытаюсь выяснить, какой браузер не реализует это право: у меня есть 2 divs, расположенных друг над другом. Для фронтальной оси я поворачиваю ось Y и переводя X-ось. Теперь для этого же я установил более низкий z-индекс, чем другой. Я вижу два разных выхода для Chrome/Safari. Какой из них имеет смысл. Здесь мой тест: http://jsfiddle.net/f5VWN/
Я думаю, проблема может быть сокращена до: Учитывая 2 элемента в 3d пространстве, имеет ли вообще z-индекс:)?
Ответы
Ответ 2
По умолчанию потомки элемента сглажены в родительскую плоскость, поэтому передние и задние divs не разделяют одно и то же пространство 3D. Они просто преобразуются и укладываются поверх контейнера div отдельно, что заставляет задний div быть нарисован поверх передней панели. Чтобы преобразовать элементы в одном и том же трехмерном пространстве, добавив трехмерное перекрытие дочерних div, установите для свойства -webkit-transform-style значение preserve-3d в контейнере: http://jsfiddle.net/f5VWN/2/
Z-индекс по-прежнему имеет значение, особенно когда два элемента перекрывают друг друга.