【问题标题】:-moz-transform z-index bug?-moz-transform z-index 错误?
【发布时间】:2011-10-14 18:36:44
【问题描述】:

this testcase 中,没有-moz-transform: rotate(-31deg);,黄色框是可见的(应该是这样)。但是,如果我添加它,尽管z-index 为 999,黄色框仍不可见。

为什么?

【问题讨论】:

  • 请描述错误的“错误结果”是什么。
  • @Spudley:第三个(小黄色)div 消失了 - 如果发生 -moz-transform,它的 z-index:1 将被忽略。
  • 我在您的问题中添加了基本格式和常识。

标签: css


【解决方案1】:

这不是错误,而是故意的:转换元素时的默认行为是首先将转换后的元素展平为单层。

您的问题的答案在于 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,当前的 BetaAurora 版本也不支持。

信息很难找到,但this bug report on Mozilla.org 暗示他们正在为 Firefox 版本 10 开发它。

考虑到他们当前的发布周期并不像听起来那么遥远,但仍然需要一段时间才能在 Firefox 中使用此功能。同时,我能给你的唯一可行的解​​决方案是将元素分开而不是嵌套它们,并独立旋转它们。

【讨论】:

  • 根据docs,firefox完全实现了它,甚至去掉了-moz-前缀。不过,preserve-3d 对 z-index 渲染没有影响!
猜你喜欢
  • 1970-01-01
  • 2011-03-18
  • 1970-01-01
  • 1970-01-01
  • 2014-05-02
  • 2014-01-18
  • 2010-11-12
  • 2012-09-09
  • 1970-01-01
相关资源
最近更新 更多