Perspective-origin - Propriété CSS

perspective-origin

Résumé des caractéristiques de la propriété perspective-origin

Description rapide
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Statut
Standard
S'applique à
Éléments transformables.
Utilisable sur
HTML
Valeurs prédéfinies
center | top | bottom | left | right
Pourcentages
Calculés par rapport aux dimensions de l'élément.
Valeur initiale
50% 50%
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété perspective-origin passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de perspective-origin.

Perspective-origin property - Syntax diagramSyntax diagram of the perspective-origin CSS property. See stylescss.free.fr for details. left left center center right right length-x length-x %-x %-x top top center center bottom bottom length-y length-y %-y %-yperspective-origin:;perspective-origin:;
Schéma syntaxique de la propriété 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 et length-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 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 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 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.

  • 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 pour perspective-origin

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.

perspective-origin :
perspective-origin :
Rotation X
Rotation Y
Point d'observation

Compatibilité des navigateurs avec perspective-origin.

Colonne 1
Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.
Colonne 2
Prise en charge par les navigateurs de la propriété perspective-origin qui définit le décentrage de l'observateur (animations 3D).

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

    Concernant perspective-origin. Introduction des transformations 3D et de la propriété perspective-origin dans la spécification concernant les transformations.
    WD
    03 Mars 2020
    Document de travail.
    CR
    PR
    REC

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 :

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.
Perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation à appliquer à l'élément.
scale
Définit une mise à l'échelle de l'élément (agrandissement ou réduction).
transform
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
transform-box
Définit la boîte de référence pour les transformations.
transform-origin
Définit le point d'origine pour les transformations.
transform-style
Définit comment sont rendus les éléments soumis à une transformation 3D.
translate
Applique une translation à un élément (un déplacement linéaire).

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 à appliquer à l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D à appliquer à un é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.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Définit une translation (un déplacement) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).