在this testcase 中，没有-moz-transform: rotate(-31deg);，黄色框是可见的（应该是这样）。但是，如果我添加它，尽管z-index 为 999，黄色框仍不可见。
为什么？
【问题讨论】：
标签： css
这不是错误，而是故意的：转换元素时的默认行为是首先将转换后的元素展平为单层。
您的问题的答案在于 CSS transform-style 属性，它会覆盖此默认行为，并允许您维护嵌套在正在转换的元素中的各个元素的 z-index 顺序。
如W3C documentation中所述：
“transform-style”属性定义嵌套元素在 3D 空间中的渲染方式。如果“transform-style”为“flat”，则该元素的所有子元素都将被渲染到元素的 2D 平面中。因此，围绕 X 或 Y 轴旋转元素将导致位于正或负 Z 位置的子元素出现在元素的平面上，而不是出现在元素的前面或后面。如果“transform-style”为“preserve-3d”，则不执行此展平，因此儿童保持其在 3D 空间中的位置。
因此，要解决您的问题，理论上您需要将以下内容添加到 #one 的 CSS 代码中：transform-style:preserve-3d;
不幸的是，“理论上”似乎是这里的游戏名称，因为 Firefox 似乎还不支持此功能。它显然受到 Safari 的支持（请参阅此页面详细说明：http://www.webkit.org/blog/386/3d-transforms/），但即使在 Safari 中，我快速尝试让它在您的小提琴中工作也没有成功。
[编辑]
我可以确认当前版本的 Firefox (v7) 不支持 transform-style 或 -moz-transform-style，当前的 Beta 或 Aurora 版本也不支持。
信息很难找到，但this bug report on Mozilla.org 暗示他们正在为 Firefox 版本 10 开发它。
考虑到他们当前的发布周期并不像听起来那么遥远，但仍然需要一段时间才能在 Firefox 中使用此功能。同时，我能给你的唯一可行的解决方案是将元素分开而不是嵌套它们，并独立旋转它们。
【讨论】：
-moz-前缀。不过，preserve-3d 对 z-index 渲染没有影响！