-moz-transform z-index错误？ [英] -moz-transform z-index bug?

问题描述

在此测试用例中，没有 -moz-transform：rotate（-31deg） ; ，黄色框是可见的（因为它应该是）。但是，如果我添加这个，黄色框是不可见的，尽管有 z-index 999。

In this testcase, without -moz-transform: rotate(-31deg);, the yellow box is visible (as it should be). But if I add this in, the yellow box is not visible despite having a z-index of 999.

为什么？

推荐答案

这不是一个错误，它是有意的：转换元素时的默认行为是首先平铺

It isn't a bug, it's intentional: the default behaviour when you transform an element is to first flatten the transformed elements into a single layer.

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

The answer to your question lies in the CSS transform-style property, which overrides this default behaviour, and allows you to maintain the z-index ordering of individual elements nested within the element that is being transformed.

如 W3C文档：

transform-style属性定义嵌套元素在3D空间中的呈现方式。如果'transform-style'是'flat'，那么这个元素的所有子元素都会被展平为元素的2D平面。因此，围绕X或Y轴旋转元件将导致位于正或负Z位置的儿童出现在元件的平面上，而不是在其前面或后面。如果'transform-style'是'preserve-3d'，这个扁平化不执行，所以孩子们在3D空间中保持其位置。

The ‘transform-style’ property defines how nested elements are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the X or Y axes will cause children positioned at positive or negative Z positions to appear on the element's plane, rather than in front of or behind it. If the ‘transform-style’ is ‘preserve-3d’, this flattening is not performed, so children maintain their position in 3D space.

为了解决你的问题，你理论上需要添加以下到你的CSS代码 #one ： transform-style：preserve-3d ;

So to fix your problem, you would theoretically need to add the following to your CSS code for #one: transform-style:preserve-3d;

不幸的是，理论上似乎是游戏的名称，因为似乎这个功能不支持Firefox然而。它显然是由Safari支持（见此页详细信息： http：// www。 webkit.org/blog/386/3d-transforms/ ），但我的快速尝试让它工作在你的小提琴还没有成功甚至在Safari。

Unfortunately, "theoretically" seems to be the name of the game here, because it seems that this feature isn't supported by Firefox yet. It apparently is supported by Safari (see this page which details it: http://www.webkit.org/blog/386/3d-transforms/), but my quick attempts to get it working within your fiddle haven't succeeded yet even in Safari.

我可以确认当前版本的Firefox（v7）不支持 transform-style 或 -moz-transform-style ，且目前的 Beta 或 Aurora 版本。

I can confirm that the current release of Firefox (v7) does not support transform-style or -moz-transform-style, and nor do the current Beta or Aurora releases.

信息很难找到，但这个错误报告Mozilla.org 意味着他们正在为Firefox版本10工作。

Information is hard to find, but this bug report on Mozilla.org implies that they're working on it for Firefox version 10.

考虑到他们当前的发布周期并没有听起来那样遥远，仍然有一段时间，您才能在Firefox中使用此功能。同时，我可以给你的唯一工作解决方案是分离元素而不是嵌套它们，并独立旋转它们。

Given their current release cycle that isn't as far off as it sounds, but nevertheless it is still some time away before you'll be able to use this feature in Firefox. In the meanwhile, the only working solution I can give you is to separate the elements out rather than nesting them, and rotate them independantly.

这篇关于-moz-transform z-index错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！