Comment l'ordre de transformation affecte-t-il les transformations CSS 3D, en particulier la perspective ?

Transformations CSS 3D : placement de la perspective et ordre de transformation

En CSS, la propriété perspective affecte la façon dont les transformations 3D sont appliquées aux éléments. Cependant, les utilisateurs ont observé que la modification de la position du paramètre de perspective peut avoir un impact sur le résultat de la transformation.

Explication du problème

La séquence dans laquelle les transformations sont appliquées est cruciale. Selon les spécifications CSS, la matrice de transformation est calculée en appliquant les transformations de la propriété 'transform' de gauche à droite. Si la perspective est définie à la fin de la propriété 'transform', la traduction a lieu avant de considérer la perspective.

Ordre de transformation

Pour éviter ce problème, la perspective doit toujours être placé en premier dans la propriété « transform ». Ce faisant, la perspective est appliquée avant toute autre transformation, garantissant que les traductions se produisent correctement.

Exemple

Considérez le code suivant :

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

Dans la première case, la perspective est définie avant la traduction, garantissant que la traduction se produit avec la perspective appliquée. Dans la deuxième case, la perspective est définie après la traduction, ce qui entraîne l'application de la traduction sans tenir compte de la perspective.

Notes supplémentaires

• Placer la perspective à l'intérieur de l'élément lui-même n'est pas nécessaire.
• L'ordre des autres transformations (par exemple, rotation, mise à l'échelle) est également important. les transformations appliquées plus tard dans la séquence peuvent affecter celles appliquées plus tôt.

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!