Perspective-origin - Propriété CSS

Schéma de la syntaxe de perspective-origin.

Description des termes utilisés sur le schéma :

• length-x et length-y sont deux valeurs numériques suivie d'une des unités de dimension. Ce peut être également des pourcentages calculés par rapport aux dimensions de l'élément.

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.

Pour que perspective-origin produise un effet visible, deux conditions doivent être réunies :

• La propriété perspective doit avoir une valeur différente de none.
• L'élément sur lequel est appliquée perspective-origin doit avoir des enfants qui ont subi une ou plusieurs des transformations suivantes : rotation suivant l'axe X, rotation suivant l'axe Y, déplacement suivant l'axe Z.

Valeurs 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, right, une valeur numérique ou un pourcentage. Dans ce dernier cas, la valeur est évaluée par rapport à la largeur de l'élément.

  La deuxième valeur (y) définit la position horizontale (suivant l'axe X). Cela peut être left, center ou right, une dimensions ou un pourcentage, évalué par rapport à la hauteur de l'élément.

  Si une seule valeur est indiquée, l'autre est fixée à center par défaut.

  ABC

  
  perspective-origin:center;

  ABC

  
  perspective-origin:left bottom;
• 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 dimension).

  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.

  Si une seule valeur est indiquée, elle et prise pour la positionnement horizontal du point de l'observateur, la position verticale étant alors égale à center.

  ABC

  
  perspective-origin:40px -30px;

  ABC

  
  perspective-origin:10% 50%;
• perspective-origin: initial; (50% 50%) perspective-origin: inherit; perspective-origin: revert; perspective-origin: revertLayer; perspective-origin: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de perspective-origin.

La mise en mouvement du point d'origine en animant la propriété perspective-origin renforce l'effet 3D.
Dans cet exemple, les propriétés perspective et perspective-origin sont appliquées sur le bloc parent, tandis que la transformation est appliquée sur l'image (une rotation de 10 degrés autour de l'axe Y).

Exemple interactif avec la propriété perspective-origin.

Pour faciliter la compréhension, le simulateur ci-dessous montre l'effet de la propriété perspective-origin sur des éléments animés, mais ce n'est pas indispensable : la propriété agit dès qu'il y a transformation 3D, animée ou pas.

L’œil indique où est placé le point d'origine pour le calcul de la perspective. L'effet se voit sur les éléments animés qui sont déformés différemment suivant l'emplacement de ce point.

Rotation X

Rotation Y

Compatibilité des navigateurs avec perspective-origin.

Remarques :

(1) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
3D

2

Propriété
perspective-origin

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété perspective-origin.

• Module CSS - Transformations - Niveau 2

  En plus des transformations 2D déjà présentées dans le niveau 1 de la spécification, ce module traite des transformations en 3D. Il introduit de nouvelles propriétés pour gérer la hauteur du point de vue et la restitution des effets 3D.
  Ce module introduit également les propriétés individuelles de rotation, translation et effet de zoom.

  Concernant perspective-origin. Introduction des transformations 3D et de la propriété perspective-origin dans la spécification concernant les transformations.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou Module CSS - Transformations en anglais), regroupe tout ce qui concerne les transformations en CSS :

Propriétés :

Fonctions :