Pourquoi l'ordre de « perspective() » dans les transformations CSS 3D est-il important ?

Quirks de transformation CSS 3D : ordre en perspective

Les transformations CSS 3D offrent des options robustes pour manipuler des éléments en trois dimensions. Cependant, une bizarrerie particulière a été observée : l'ordre de la fonction perspective() dans la propriété transform affecte la transformation résultante.

L'ordre compte

Considérez le code suivant extrait :

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

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

Ici, les éléments sont destinés à entrer et sortir de l'écran. Cependant, l’effet n’est visible que pour la première case, tandis que la seconde reste inchangée. Ce comportement étrange se produit parce que l'ordre de la fonction perspective() est important.

Calcul de transformation

Selon la spécification CSS, la matrice de transformation est calculée à partir de la propriété transform dans l'ordre suivant :

1. Appliquer la traduction spécifiée par transform-origin
2. Multiplier par chaque transformation fonction, de gauche à droite
3. Transformation inverse spécifiée par transform-origin

Cela signifie que la fonction perspective() doit être appliquée en premier (c'est-à-dire la plus à gauche) pour que ses effets soient correctement considéré.

Évitez la perspective dans les éléments transformés

De plus, c'est Il est important d'éviter d'utiliser la propriété perspective dans les éléments eux-mêmes. Bien que cela puisse sembler logique, cela est inutile et peut conduire à des résultats inattendus.

Par conséquent, assurez-vous toujours que la fonction perspective() est répertoriée en premier dans la propriété transform pour obtenir les transformations 3D souhaitées.

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!