一尘不染

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

css

我有两个绝对重叠的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过渡。


阅读 298

收藏
2020-05-16

共1个答案

一尘不染

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

2020-05-16