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

Transformations CSS 3D : interactions en perspective

Lors de l'application de transformations 3D en CSS, l'ordre d'exécution joue un rôle crucial. Ceci est particulièrement pertinent lors de l'utilisation de la fonction perspective().

Description du problème

Un utilisateur a observé que la propriété transform présente des effets différents selon que la fonction perspective() la fonction est déclarée au début ou à la fin de la valeur de la propriété. Ce comportement a été observé dans les navigateurs Chrome et Firefox.

Cause première

Selon les spécifications CSS, la matrice de transformation est calculée en appliquant les fonctions de transformation de gauche à droite. Lorsque la fonction perspective() est placée à la fin, elle est appliquée après toutes les autres transformations, telles que les traductions. Il en résulte que la traduction est effectuée sans prendre en compte la perspective.

Solution

Pour garantir des transformations 3D précises, il est impératif de spécifier la fonction perspective() en début de la valeur de la propriété de transformation.

Exemple :

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 ce Par exemple, la première case sera traduite dans l'espace 3D avec l'effet de perspective appliqué, tandis que la seconde case n'aura pas la perspective appliquée.

Considérations supplémentaires :

• Il n'est pas recommandé d'utiliser la propriété perspective au sein d'éléments en cours de transformation. Cela peut conduire à des résultats inattendus.
• L'ordre des fonctions de transformation est important et peut affecter le résultat. Il est crucial d’expérimenter et d’explorer l’impact des différentes séquences.

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!