我有两个绝对定位的div元素,它们重叠在一起。两者都通过CSS设置了z-index值。我使用translate3d WebKit变换来使这些元素离开屏幕并再次进入屏幕。变换后,这些元素不再遵循其设置的z-index值。
请问有人能解释一下当我对它们进行WebKit变换时,div元素的z-index /堆栈顺序会发生什么事情吗?还能讲解一下我该如何保持div元素的堆栈顺序?
以下是我如何执行转换的更多信息:
在变换之前,每个元素都通过CSS设置这两个WebKit转换值(我使用jQuery来执行.css()函数调用):
请问有人能解释一下当我对它们进行WebKit变换时,div元素的z-index /堆栈顺序会发生什么事情吗?还能讲解一下我该如何保持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)' });
顺便提一下,我尝试将translate3d
的第三个参数设置为几个不同的值,以尝试在三维空间中复制堆栈顺序,但是没有成功。
此外,iPhone/iPad和Android浏览器是该代码需要运行的目标浏览器。两者都支持webkit转换。