Comment « translate3d » affecte-t-il le « z-index » CSS et comment puis-je maintenir l'ordre d'empilement ?

Impacts de la transformation 3D sur le z-Index CSS

Lorsque vous travaillez avec des éléments superposés en position absolue, les propriétés du z-index sont essentielles pour contrôler leur pile commande. Cependant, lors de l'utilisation de la transformation Translate3d WebKit, ce contrôle est perdu.

Explication

Lors d'une transformation Translate3d, les éléments sont déplacés dans un espace 3D. En attribuant une valeur au troisième paramètre (-1px dans ce cas), l'élément est positionné le long de l'axe z. Cependant, cette élévation dans l'espace 3D modifie également la façon dont les valeurs de l'index z sont appliquées, ce qui amène les éléments à ignorer leur ordre de pile établi.

Maintenir l'ordre de la pile

Pour préserver l'ordre de la pile lors des transformations 3D, utilisez la propriété CSS transform-style: flat; pour l'élément concerné.

Exemple de mise en œuvre

Avant la transformation
Définissez les valeurs de transition du webkit :

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

Pendant la transformation
Animez à l'aide de translate3d, en vous assurant que le troisième paramètre est défini pour aplatir la position de l'élément le long de l'axe z :

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

Après la transformation
Appliquer transform-style: flat; pour conserver l'ordre de la pile :

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

En incorporant cette propriété, les éléments conserveront leur empilement d'index z avant la transformation, permettant un affichage correct dans un contexte multicouche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!