Comment les transformations 3D affectent-elles l'ordre d'empilement du z-index ?

Transformations 3D et Z-Index : percer le mystère

Lors de l'utilisation de transformations Webkit en CSS, notamment via Translate3d, des incohérences peuvent survenir dans le comportement du z-index, affectant l'ordre de pile des éléments.

Dans votre cas, vous avez utilisé translate3d pour animer deux divs qui se chevauchent et les reviennent sur l'écran. Cependant, après la transformation, les divs ont perdu leur priorité d'index z prescrite.

Cela se produit parce que lorsque vous appliquez une transformation 3D sur l'axe z (c'est-à-dire le troisième paramètre de Translate3d), l'index z 2D traditionnel Le mécanisme ne s’applique plus. Dans un plan de rendu 3D, la hiérarchie est déterminée par la valeur z de chaque élément, remplaçant ainsi l'indice z.

Pour remédier à cela, vous avez deux options :

1. Passer au rendu plat : En définissant la propriété transform-style sur plat, vous pouvez revenir au rendu 2D pour les éléments enfants. Cela oblige le navigateur à prioriser à nouveau les valeurs de l'index z.
2. Répliquer l'ordre de la pile en 3D : Malheureusement, le troisième paramètre de translate3d ne réplique pas l'ordre de la pile dans un espace 3D. Vous devrez ajuster manuellement la valeur z de chaque élément pour obtenir l'ordre de pile souhaité.

Contexte supplémentaire :

Reportez-vous au rapport de bug WebKit (https ://bugs.webkit.org/show_bug.cgi?id=61824) pour en savoir plus insights.

Navigateurs cibles :

Les navigateurs iPhone/iPad et Android prennent en charge les transitions de kits Web. Vous devriez donc voir le problème résolu dans ces environnements.

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!