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.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.
Syntaxes pour perspective-origin
.
x
et y
sont deux dimensions qui positionnent le point de vue.
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 CSS 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
; perspective-origin:inherit
; perspective-origin:revert
; perspective-origin:revert-layer
; perspective-origin:unset
;La valeur initiale est :
.50% 50%
Animation de la propriété 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).
Simulateur.
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.
Prise en charge par les navigateurs (compatibilité).
perspective-origin
.
perspective-origin
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que perspective-origin
.
Les spécifications CSS éditées par le W3C sont organisées en modules. perspective-origin
fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.