在this testcase，没有-moz-transform: rotate(-31deg);时，黄色框是可见的（应该是这样）。但是如果我添加它，尽管z-index为999，黄色框仍然不可见。
为什么？
答案 0 :(得分：2)
这不是一个错误，它是故意的：转换元素时的默认行为是首先将转换后的元素展平为单个图层。
您的问题的答案在于CSS transform-style属性，该属性会覆盖此默认行为，并允许您维护嵌套在正在转换的元素中的各个元素的z索引顺序。
'transform-style'属性定义嵌套元素在3D空间中的呈现方式。如果'transform-style'是'flat'，则此元素的所有子元素将被渲染为元素的2D平面。因此，围绕X轴或Y轴旋转元件将使位于正Z位置或负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中使用这个功能之前还有一段时间。与此同时，我能给你的唯一可行解决方案是将元素分开而不是嵌套它们，并将它们独立旋转。