Perspective - Propriété CSS

Schéma de la syntaxe de perspective.

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

• length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension.

Description de la propriété perspective.

La propriété perspective définit un effet de perspective sur un élément qui a subi une transformation 3D. Reportez-vous à la page sur transform pour une présentation des transformations en CSS.

La propriété s'applique au conteneur, L'effet de perspective est calculé en considérant que l'observateur est au centre de l'élément container. Voir la propriété perspective-origin pour changer la position de l'observateur.

Les valeurs inférieures à 1 pixel sont ramenées à 1 pixel. De toute façon il est rarement que l'on descende à de valeurs aussi basses car le rendu est alors bizarre. On reste généralement sur des valeurs minimales de 50 pixels.

perspective n'a aucun effet sur les éléments qui n'ont pas subi de transformation, ou ceux qui ont subi une transformation qui les laisse dans le plan 2D. L'effet de perspective est visible sur les transformations suivantes :

• Rotations autour de l'axe X (horizontal) ou autour de l'axe Y (vertical).
• Déplacement suivant l'axe Z.
• Toutes les combinaisons faisant intervenir au moins une transformation ci-dessus.

Attention, contrairement à la fonction perspective(), la propriété perspective applique son effet sur les éléments enfants. Il faut donc appliquer la propriété au conteneur. Le résultat est cependant sensiblement différent.

Valeurs pour perspective.

• perspective: none;

  Aucun effet de perspective n'est appliqué.

  😸 😹 😻
• perspective: 200px;

  Cette valeur définit la distance entre l'observateur et l'élément. L'effet de perspective est d'autant plus élevé que observateur et élément sont proches.

  La valeur est un nombre strictement positif, suivi d'une des unités de dimension. Les pourcentages ne sont pas autorisés.

  😸 😹 😻

  
  perspective:100px;

  😸 😹 😻

  
  perspective:200px;
• perspective: initial; (none) perspective: inherit; perspective: revert; perspective: revertLayer; perspective: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de perspective.

L'animation de perspective peut donner des résultats surprenants. Par exemple, on a l'impression sur cet exemple que la vitesse de l'animation n'est pas du tout constante. Pourtant il s'agit bien d'une animation linéaire, mais le calcul de perspective est beaucoup plus sensible pour les faibles valeurs (là où l'effet de perspective est le plus marqué).

L'exemple est constitué d'un élément parent, sur lequel on applique la perspective (avec l'animation), et d'un élément enfant sur lequel la transformation a été appliquée. Il s'agit ici d'une rotation suivant l'axe Y (vertical).

Exemple interactif avec la propriété perspective.

Le simulateur ci-dessous vous permettra de comprendre l'effet de la propriété perspective : les deux cadres intérieurs ont déjà reçu les styles pour les tourner suivant l'axe X ou l'axe Y. Tapez une dimension entre 50px et 700px et observez le résultat. En dessous de 50 pixels, la déformation est vraiment trop forte et rend le texte illisible. Au dessus de 700px, les variations de perspective sont trop peu sensibles.

L'observateur est censé se trouvé au milieu de l'élément parent. Sa position est matérialisée par le dessin d'un œil. Voir la propriété perspective-origin pour changer cet emplacement.

Pour le fun, vous pouvez aussi observer tout ceci en animation  

Compatibilité des navigateurs avec perspective.

Remarques :

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

(2) En IOS 13 la propriété perspective ne fonctionne pas correctement.

1

Transformations
3D

2

Propriété
perspective

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

2

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.

• 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. Introduction des transformations en 3D et de la propriété perspective dans la spécification concernant les transformations.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le W3C organise les spécifications CSS en modules. Le module "Module CSS - Transformations" ou Module CSS - Transformations en anglais, regroupe toutes les définitions concernant les transformations CSS :

Propriétés :

Fonctions :