CSS webkit转换translate3d后css z-index丢失

css z-index lost after webkit transform translate3d

提问by Rafe

I have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the translate3dwebkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set z-indexvalues.

我有两个绝对定位的 div 元素重叠。两者都通过 css 设置了 z-index 值。我使用translate3dwebkit 转换将这些元素从屏幕上设置为动画，然后返回到屏幕上。转换后，元素不再遵守它们的设定z-index值。

Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?

一旦我对它们进行 webkit 转换，谁能解释 div 元素的 z-index/stack-order 会发生什么？并解释我可以做些什么来保持 div 元素的堆栈顺序？

Here is some more information on how I am doing the transform.

这是有关我如何进行转换的更多信息。

Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the .css()function calls:

在转换之前，每个元素通过 css 获取这两个 webkit 转换值（我使用 jQuery 来执行.css()函数调用：

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

The element is then animated using the translate3d -webkit-transform:

然后使用 translate3d -webkit-transform 对元素进行动画处理：

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Btw, I have tried setting the 3rd parameter of translate3dto several different values to try to replicate the stack-order in the 3d space, but to no luck.

顺便说一句，我尝试将 的第三个参数设置translate3d为几个不同的值，以尝试在 3d 空间中复制堆栈顺序，但没有成功。

Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.

此外，iPhone/iPad 和 Android 浏览器是我运行此代码所需的目标浏览器。两者都支持 webkit 转换。

采纳答案by samy-delux

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

这可能与：https: //bugs.webkit.org/show_bug.cgi?id=61824有关

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.

基本上，当您在 z 轴上应用 3D 变换时，无法再考虑 z 索引（您现在处于 3 维渲染平面中，使用不同的 z 值）。如果要为子元素切换回 2D 渲染，请使用transform-style: flat;.

回答by divThis

This is most definitely related to the bug noted by samy-delux. This should only affect any elements which are positioned as absolute or relative. In order to remedy the issue, you can apply the following css statement to every element which is positioned this way and is causing issues:

这绝对与 samy-delux 指出的错误有关。这应该只影响定位为绝对或相对的任何元素。为了解决此问题，您可以将以下 css 语句应用于以这种方式定位并导致问题的每个元素：

-webkit-transform: translate3d(0,0,0);

This will apply the transform to the element without actually doing a transformation, but affecting its render order so it is above the element causing the issue.

这会将变换应用到元素而不实际进行变换，但会影响其渲染顺序，因此它位于导致问题的元素上方。

回答by RustyCollins

Bit Late to this but try putting on the elements that have lost their Z-index placing the following, I had an issue when doing some parallax stuff recently and this helped massively.

有点晚了，但尝试放置失去 Z-index 的元素，放置以下内容，我最近在做一些视差的事情时遇到了问题，这有很大帮助。

transform-style: preserve-3d;

This saves putting

这样可以节省推杆

transform: translate3d(0,0,0);

On other elements which puts more strain on the GPU

在对 GPU 施加更大压力的其他元素上

回答by Littlemad

Waiting to see the example

等着看例子

Have you tried to do a transform scale(1)? I remember to had a similar problem, and I had to re-arrange the html order of elements, and utilise a transform that I didn't need it just because the z-index of the use of transform changed.

你有没有试过做一个变换比例（1）？我记得有一个类似的问题，我不得不重新排列元素的 html 顺序，并使用一个我不需要它的转换，只是因为使用转换的 z-index 改变了。

If I am not in error, every time that you use a transform, it become the highest z-index available, and it is ordered by the nearest element of html is to the start of the tag. So from up to below.

如果我没有记错的话，每次使用转换时，它都会成为可用的最高 z-index，并且它按照 html 中距离标签开头最近的元素排序。所以从上到下。

I hope that this help

我希望这有帮助

回答by mrmoje

z-indexwill work against 3d transformed divs if you style the stackable element with -webkit-transform: translateZ(0px);

z-index如果您为可堆叠元素设置样式，则将适用于 3d 转换的 div -webkit-transform: translateZ(0px);

Snippet on codepen -> http://codepen.io/mrmoje/pen/yLIul

codepen 上的片段 -> http://codepen.io/mrmoje/pen/yLIul

In the example, the buttons stack upand stack downraise and lower the footer's z-index (+/-1) against the rotated element (an img in this case).

在示例中，按钮stack up和stack down将页脚的 z-index (+/-1) 相对于旋转元素（在本例中为 img）升高和降低。

回答by mrmoje

I haven't been able to reproduce the problem you describe here. Regardless of what I do, the z-index value is retained throughout all transforms. I'm testing using Chromium (Google Chrome).

我无法重现您在此处描述的问题。不管我做什么，z-index 值在所有转换中都会保留。我正在使用 Chromium (Google Chrome) 进行测试。

The third argument of the translate3d function manipulates the z-axis of the element. The concept is similar to, but not exactly the same as, the z-index... Elements with a lower z-axis are under elements with a higher value.

translate3d 函数的第三个参数操纵元素的 z 轴。该概念类似于 z-index，但不完全相同。 z 轴较低的元素位于值较高的元素之下。

I know you tried values of the third argument to match your intended z-index, but the problem is that the z-axis doesn't seem to change during CSS3 animation. In the following example, the hovered element should be on top, but #element_a stays on top.

我知道您尝试了第三个参数的值来匹配您想要的 z-index，但问题是 z 轴在 CSS3 动画期间似乎没有改变。在下面的示例中，悬停的元素应该在顶部，但 #element_a 保持在顶部。

If I add a z-index to both the regular selector and the :hover selector, it seems to work and allow the hovered element to be top-most.

如果我将 z-index 添加到常规选择器和 :hover 选择器，它似乎可以工作并允许悬停元素位于最顶部。

Although it's not exactly what you were looking for, this behavior provides a solution. You just need to use translate3d and z-index to set the order for the initial rendering.

尽管这不是您真正想要的，但这种行为提供了一种解决方案。您只需要使用 translate3d 和 z-index 来设置初始渲染的顺序。

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

回答by Rust

Another way around this is that you can create a parent element and apply all other transitions related to it:

另一种解决方法是您可以创建一个父元素并应用与其相关的所有其他过渡：

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle

提琴手