webkit转换后，css z-index丢失了

Question

我有两个绝对重叠的div元素。两者都通过CSS设置了z-
index值。我使用translate3dwebkit转换在屏幕外为这些元素设置动画，然后再回到屏幕上。转换后，元素不再遵守其设置z-index值。

一旦我对它们进行webkit转换，谁能解释div元素的z-index / stack-order会发生什么？并说明如何保持div元素的堆叠顺序？

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

在转换之前，每个元素都会通过CSS设置这两个Webkit转换值（我正在使用jQuery进行.css()函数调用：

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

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

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

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

而且，iPhone / iPad和Android浏览器是我的目标浏览器，此代码需要在其上运行。两者都支持Webkit过渡。

Answer 1

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