CSS3 z-index issue with transform:rotate()

Question

In the following example, why do the last items in the 5 and 6-element lists overlap with item #2? How is item #1 on top of the last item? Is it possible to fix this so the last item will be under items #1 AND #2?

http://jsfiddle.net/lookitscook/adw62/

Answer 1

That's a pretty ridiculous technique! And by ridiculous, I mean COOL :)

Z-index is initially defined by DOM position - the latest items in the DOM will appear on top of the others.

You can manually control this by setting "z-index" properties on each of the elements.