Perspective-origin - Propriété CSS
Résumé des caractéristiques de la propriété perspective-origin
center
| top
| bottom
| left
| right
50% 50%
perspective-origin
passe progressivement d'une valeur à une autre.Schéma de la syntaxe de perspective-origin
.
perspective-origin
.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description des termes utilisés sur le schéma :
length-x
etlength-y
sont deux valeurs numériques suivie d'une des unités de dimension.%-x
et%-y
sont des pourcentages calculés sur les 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 denone
. - 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 êtreleft
,center
ouright
.La deuxième valeur (
y
) définit la position horizontale (suivant l'axe X). Cela peut êtreleft
,center
ouright
.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 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 dey
. - 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.

Compatibilité des navigateurs avec perspective-origin
.
backface-visibility
.perspective-origin
qui définit le décentrage de l'observateur (animations 3D).Remarques :
(2) Internet Explorer ne supporte pas transform-style:preserve-3d
limitant ainsi l'imbrication des animations.
3D
perspective-origin
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

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
Histoire de la propriété perspective-origin
.
-
Module CSS - Transformations - Niveau 2
Introduction des transformations 3D et de la propriétéperspective-origin
dans la spécification concernant les transformations.03 Mars 2020Document de travail.
Voir aussi, concernant les transformations.
Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais), regroupe tout ce qui concerne les transformations en CSS :