`translate3d` 如何影响 CSS `z-index`，以及如何维护堆叠顺序？

3D 变换对 CSS z-Index 的影响

使用重叠的绝对定位元素时，z-index 属性对于控制其堆栈至关重要命令。然而，当使用translate3d WebKit转换时，这种控制就会丢失。

说明

在translate3d转换期间，元素在3D空间中移动。通过为第三个参数分配一个值（在本例中为 -1px），元素将沿 z 轴定位。然而，3D 空间中的这种高度也会改变 z-index 值的应用方式，导致元素忽略其已建立的堆栈顺序。

维护堆栈顺序

保留3D 变换期间的堆栈顺序，使用 CSS 属性transform-style: flat;相关元素。

示例实现

转换之前
设置 webkit 过渡值：

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

在变换期间
使用动画translate3d，确保将第三个参数设置为沿 z 轴展平元素的位置：

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

变换后
应用transform-style: flat;保留堆叠顺序：

element.css({ 'transform-style': 'flat' });

通过合并此属性，元素将保持其预变换 z 索引堆叠，从而允许在多层上下文中正确显示。

以上是`translate3d` 如何影响 CSS `z-index`，以及如何维护堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！