-moz-transform z-index bug?

Question

In this testcase, without -moz-transform: rotate(-31deg);, the yellow box is visible (as it should be). But if I add this in, the yellow box is not visible despite having a z-index of 999.

Why?

Answer 1

It isn't a bug, it's intentional: the default behaviour when you transform an element is to first flatten the transformed elements into a single layer.

The answer to your question lies in the CSS transform-style property, which overrides this default behaviour, and allows you to maintain the z-index ordering of individual elements nested within the element that is being transformed.

As described in the W3C documentation:

The ‘transform-style’ property defines how nested elements are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the X or Y axes will cause children positioned at positive or negative Z positions to appear on the element's plane, rather than in front of or behind it. If the ‘transform-style’ is ‘preserve-3d’, this flattening is not performed, so children maintain their position in 3D space.

So to fix your problem, you would theoretically need to add the following to your CSS code for #one: transform-style:preserve-3d;

Unfortunately, "theoretically" seems to be the name of the game here, because it seems that this feature isn't supported by Firefox yet. It apparently is supported by Safari (see this page which details it: http://www.webkit.org/blog/386/3d-transforms/), but my quick attempts to get it working within your fiddle haven't succeeded yet even in Safari.

[EDIT]

I can confirm that the current release of Firefox (v7) does not support transform-style or -moz-transform-style, and nor do the current Beta or Aurora releases.

Information is hard to find, but this bug report on Mozilla.org implies that they're working on it for Firefox version 10.

Given their current release cycle that isn't as far off as it sounds, but nevertheless it is still some time away before you'll be able to use this feature in Firefox. In the meanwhile, the only working solution I can give you is to separate the elements out rather than nesting them, and rotate them independantly.