我有两个绝对重叠的div元素。两者都通过CSS设置了z- index值。我使用translate3dwebkit转换在屏幕外为这些元素设置动画,然后再回到屏幕上。转换后,元素不再遵守其设置z-index值。
translate3d
z-index
一旦我对它们进行webkit转换,谁能解释div元素的z-index / stack-order会发生什么?并说明如何保持div元素的堆叠顺序?
这是有关我如何进行转换的更多信息。
在转换之前,每个元素都会通过CSS设置这两个Webkit转换值(我正在使用jQuery进行.css()函数调用:
.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过渡。
基本上,当您在z轴上应用3D变换时,就不再考虑z索引了(您现在位于3D渲染平面中,请使用不同的z值)。如果要切换回2D渲染子元素,请使用transform-style: flat;。
transform-style: flat;