perspective-origin

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer où l'élément en 3 dimensions base son axe des X et son axe des Y.

Remarques

• Définition et rôle : La propriété perspective-origin détermine le point d'origine de la perspective pour un conteneur 3D. Ce point agit comme le "point de vue" à partir duquel l'utilisateur perçoit la transformation 3D appliquée aux enfants d'un élément, modifiant ainsi la manière dont les objets semblent se rapprocher ou s'éloigner.
• Valeurs par défaut : Par défaut, perspective-origin est centré, ce qui équivaut à 50% 50%. Cela signifie que le point d'origine de la perspective se trouve au centre de l'élément. Vous pouvez ajuster cette origine en utilisant des pourcentages, des unités absolues (comme px), ou les mots-clefs left, right, top, et bottom.
• Impact sur l'effet 3D : Modifier la valeur de perspective-origin change l'effet visuel des transformations 3D. Par exemple, si vous déplacez l'origine vers le bord gauche (0% 50%), les objets 3D paraîtront pivoter ou se projeter davantage vers ce côté, créant un effet asymétrique.
• Interaction avec la propriété perspective : La propriété perspective-origin fonctionne uniquement lorsqu'une perspective est définie via la propriété perspective. Sans perspective, cette propriété n'a aucun effet, car il n'y a pas de profondeur 3D à modifier.
• Ordre des axes : perspective-origin accepte deux valeurs : la première pour l'axe horizontal (X) et la seconde pour l'axe vertical (Y). Par exemple, perspective-origin: 25% 75%; place l'origine à 25% du côté gauche et 75% du haut.
• Utilisation avec des unités absolues et relatives : Vous pouvez utiliser des unités absolues comme px ou cm pour positionner précisément l'origine. Cependant, l'utilisation de pourcentages (%) est plus courante, car cela permet de s'adapter dynamiquement à la taille de l'élément.
• Effet limité aux enfants de l'élément : perspective-origin affecte uniquement les transformations 3D des enfants de l'élément sur lequel il est appliqué. Cela signifie que le point d'origine agit comme un cadre de référence pour toutes les transformations effectuées dans ce contexte 3D.
• Complémentarité avec transform-origin : Bien que perspective-origin détermine le point de vue du conteneur 3D, la propriété transform-origin détermine le point autour duquel les transformations individuelles d'un élément pivotent. Ces deux propriétés peuvent être combinées pour des effets 3D complexes et dynamiques, en contrôlant à la fois l'origine de la perspective globale et les pivots des objets.