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.