Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 être left, center ou right.

    La deuxième valeur (y) définit la position horizontale (suivant l'axe X). Cela peut être left, center ou right.

    Si une seule valeur est indiquée, l'autre est fixée à center par 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 x et la hauteur pour le calcul de y.

  • perspective-origin: initial;

    La valeur initiale est center center.

  • perspective-origin: unset; perspective-origin: inherit;

    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.

Position horizontale :
Position verticale :
Rotation X
Rotation Y
Point d'observation

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.