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 中使用此功能还需要一段时间。同时，我可以为您提供的唯一可行的解决方案是将元素分开而不是嵌套它们，并独立旋转它们。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
