Transformaciones 3d CSS3 - La superposición de divs con diferentes índices z tiene resultados diferentes para navegadores webkit

Question

Estoy tratando de averiguar qué navegador no está implementando este derecho: Tengo 2 divs colocados uno encima del otro. Para el frente, giro el eje Y y traduzco el eje X. Ahora para este mismo, establecí un índice Z más bajo que el otro. Veo 2 salidas diferentes para Chrome/Safari. Cuál es el que tiene más sentido. Aquí está mi prueba: http://jsfiddle.net/f5VWN/

Supongo que el problema se puede reducir a: Dado 2 elementos en el espacio 3D, ¿importa el z-index :)?

Answer 1

Según la spec:

La posición en el eje Z de un elemento de transformada no afecta el orden dentro de un contexto de apilamiento.

Safari lo muestra incorrectamente. Sin embargo, independientemente, no haría que su diseño dependa de esta técnica.

Answer 2

Los descendientes de un elemento se aplanan en el plano principal de forma predeterminada, por lo que los divisores frontal y posterior no comparten el mismo espacio 3D. Simplemente se transforman y se colocan en la parte superior de la div del contenedor por separado, lo que hace que el div div se dibuje en la parte superior del div frontal. Para transformar los elementos en el mismo espacio 3D, dando superposición 3D a los divs niño, establecer la propiedad -webkit-transform-style a preserve-3d en el contenedor: http://jsfiddle.net/f5VWN/2/

El índice z sigue siendo importante, sobre todo cuando los dos elementos se superponen entre sí.