-moz-变换 z-index 错误？

In 这个测试用例 http://jsfiddle.net/MZ7PX/， 没有-moz-transform: rotate(-31deg);，黄色框是可见的（它应该是可见的）。但是如果我添加这个，尽管有一个黄色框是不可见的z-index of 999.

Why?

这不是一个错误，而是有意为之：转换元素时的默认行为是首先将转换后的元素展平为单个层。

你的问题的答案就在 CSS 中transform-style属性，它会覆盖此默认行为，并允许您维护嵌套在正在转换的元素中的各个元素的 z-index 顺序。

如中所述W3C 文档 http://www.w3.org/TR/css3-3d-transforms/#transform-style:

“transform-style”属性定义了嵌套元素在 3D 空间中的渲染方式。如果“transform-style”为“flat”，则该元素的所有子元素都会渲染为元素的 2D 平面。因此，绕 X 或 Y 轴旋转元素将导致位于正 Z 位置或负 Z 位置的子元素出现在元素的平面上，而不是出现在元素的前面或后面。如果“transform-style”是“preserve-3d”，则不会执行这种扁平化，因此子项会保持其在 3D 空间中的位置。

因此，要解决您的问题，理论上您需要将以下内容添加到 CSS 代码中：#one: transform-style:preserve-3d;

不幸的是，“理论上”似乎是这里的游戏名称，因为 Firefox 似乎还不支持此功能。 Safari 显然支持它（请参阅此页面，其中详细介绍了它：http://www.webkit.org/blog/386/3d-transforms/ http://www.webkit.org/blog/386/3d-transforms/），但我快速尝试让它在你的小提琴中工作，即使在 Safari 中也没有成功。

[EDIT]

我可以确认当前版本的 Firefox (v7) 不支持transform-style or -moz-transform-style，并且当前也没有Beta https://developer.mozilla.org/en/Firefox_8_for_developers or Aurora https://developer.mozilla.org/en/Firefox_9_for_developers发布。

信息很难找到，但是Mozilla.org 上的此错误报告 https://bugzilla.mozilla.org/show_bug.cgi?id=682919暗示他们正在为 Firefox 版本 10 开发此功能。

考虑到他们当前的发布周期并不像听起来那么遥远，但距离您能够在 Firefox 中使用此功能还需要一段时间。同时，我可以为您提供的唯一可行的解​​决方案是将元素分开而不是嵌套它们，并独立旋转它们。