CSS3 3d transforms - Overlapping divs with different z-indexes has different results for webkit browsers

Question

I am trying to figure out which browser is not implementing this right: I have 2 divs positioned on top of each other. For the front one I rotate the Y axis and translate the X axis. Now for this same one I set a lower z-index than the other one. I see 2 different outputs for Chrome / Safari. Which one is the one that makes more sense. Here's my test: http://jsfiddle.net/f5VWN/

I guess the problem can be shortened to: Given 2 elements in 3d space, does the z-index matters at all :) ?

Answer 1

According to the spec:

The position on the Z axis of a transformed element does not affect the order within a stacking context.

Safari is rendering it incorrectly. However, regardless, I would not make your layout depend on this technique.

Answer 2

Descendants of an element are flattened into the parent's plane by default, so the front and back divs aren't sharing the same 3D space. They're just transformed and laid on top of the container div separately, which causes the back div to be drawn on top of the front div. To transform the elements in the same 3D space, giving 3D overlapping to the child divs, set the -webkit-transform-style property to preserve-3d in the container: http://jsfiddle.net/f5VWN/2/

The z-index still matters, particularly when the two elements overlap each other.