CSS - Propriété perspective-origin
Description de la propriété perspective-origin.
La propriété perspective-origin définit la position de l'observateur dans le cas d'une transformation
3D avec perspective.
Reportez vous aussi aux propriétés transform pour appliquer une transformation
et perspective pour définir l'effet de perspective.
Les propriétés perspective et perspective-origin sont à appliquer sur l'élément parent
mais leur effet sera visible sur les enfants de cet élément.
perspective-origin attend deux valeurs qui correspondent respectivement à la position horizontale de l'observateur
et à sa position verticale. Exemple : perspective-origin:left 20%;
fixe le point d'observation sur la gauche du parent et à 20% de sa hauteur.
Syntaxes pour perspective-origin.
- perspective-origin: left bottom; x y
Deux valeurs, séparées par un espace, pour positionner le point d'observation.
La première valeur (
x) définit la position horizontale (suivant l'axe X). Cela peut êtreleft,centerouright.La deuxième valeur (
y) définit la position horizontale (suivant l'axe X). Cela peut êtreleft,centerouright.Si une seule valeur est indiquée, l'autre est fixée à
centerpar défaut. - perspective-origin: 40px 80px; x y
La position du point d'observation peut être spécifiée par deux valeurs numériques, positives ou négatives, et suivies d'une unité de dimension (voir les unités de dimensions en CSS).
Les pourcentages sont calculés par rapport aux dimensions de l'élément, la largeur pour le calcul de
xet la hauteur pour le calcul dey. - perspective-origin:
initial;La valeur initiale est
center center. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
Pour faciliter la compréhension, le simulateur ci-dessous montre l'effet
de la propriété perspective-origin en animation mais ce n'est pas indispensable :
la propriété agit dès qu'il y a transformation 3D, animée ou pas.
Voir aussi...
Transformations géométriques - Propriétés.
backface-visibility: Visibilité de la face arrière de l'élément (pendant sa rotation).perspective: Effet de perspective appliqué à un élément ayant subi une transformation 3D.transform: Applique une transformation géométrique.transform-origin: Point d'origine pour certaines transformations.transform-style: Rendu des éléments soumis à une transformation 3D.
Transformations géométriques - Fonctions.
matrix(): Applique une transformation composite à un élément (translations, rotations...)matrix3d(): Applique une série de transformations 3D à un élément.perspective(): Définit la hauteur de l'observateur dans le cas d'une transformation 3D.rotate(): Définit une rotation de l'élément en 2D (dans le plan de l'écran).rotate3d(): Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.rotateX(): Définit une rotation de l'élément autour de l'axe X (en 3D),rotateY(): Définit une rotation 3D de l'élément autour de l'axe Y.rotateZ(): Définit une rotation de l'élément autour de l'axe Z.scale(): Définit un agrandissement ou une réduction de l'élément.