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

Transformations CSS 3D avec perspective à la fin : comprendre la raison

Les transformations CSS 3D permettent des animations complexes et des effets de perspective sur les éléments Web. Cependant, une curieuse observation est apparue lorsque la propriété perspective est placée à la fin de la liste de transformation.

Problème :

Dans l'extrait fourni, deux cases ont des survols différents comportements. La propriété perspective est placée à la fin de la liste de transformation pour la première case, alors qu'elle précède la transformation pour la deuxième case :

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

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

Cela entraîne des résultats visuels différents même si les deux transformations semblent identiques.

Réponse :

La clé pour comprendre ce comportement réside dans l'ordre dans lequel la matrice de transformation est calculée. Selon la spécification CSS Transform, la matrice est calculée comme suit :

1. Commencez par la matrice d'identité.
2. Traduisez par les X et Y calculés de l'origine de la transformation.
3. Multipliez par chaque fonction de transformation dans la propriété de transformation de gauche à droite.
4. Traduisez par les valeurs X et Y calculées annulées de transform-origin.

Explication :

Dans l'étape 3, il est crucial d'appliquer les transformations de de gauche à droite. Cela signifie que lorsque la perspective est placée en fin de liste, la traduction est effectuée avant que la perspective ne soit appliquée.

De ce fait, la traduction se produit en l'absence d'effet de perspective, c'est pourquoi le résultat le mouvement semble plat et sans profondeur.

Implications :

• Placez toujours la propriété perspective au début de la liste de transformations pour vous assurer qu'elle est appliquée avant toute autre transformation.
• Évitez d'appliquer la propriété perspective au sein de l'élément que vous souhaitez transformer, car elle n'aura aucun effet.

En suivant En suivant ces directives, vous pouvez obtenir les effets de transformation 3D souhaités avec l'application correcte de la propriété perspective.

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!