Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

perspective - Propriété CSS

perspective

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

Description rapide
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
Statut
Standard
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété perspective passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document:: WD (document de travail)

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.

Exemple sans transformation et sans perspective
Élément non transformé : il est dans le plan 2D
Exemple avec une rotation sans perspective
Cet élément a subi une rotation. Sans effet de perspective il parait simplement compressé.
Exemple avec une rotation et un effet de perspective
Cet élément a subi la même rotation, mais avec un effet de perspective.

Attention à la particularité de perspective : son effet est visible sur les éléments enfants. Il faut donc appliquer la propriété au container. 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.

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 suivant l'axe X (horizontal) ou suivant l'axe Y (vertical).
  • Déplacement suivant l'axe Z.
  • Toutes les combinaisons faisant intervenir au moins une des deux transformations ci-dessus.

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 unité de dimension. Voir les unités CSS de dimension. Les pourcentages ne sont pas autorisés.

  • perspective: initial; perspective: inherit; perspective: revert; perspective: revert-layer; perspective: unset;

    La valeur initiale est : none.

Animation de la propriété 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).

➽➽➽➽➽➽

Simulateur.

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  

perspective :
Cet élément a été tourné de 30 degrés suivant l'axe X
Cet élément a été tourné de -45 degrés suivant l'axe Y

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge par les navigateurs des transformations 3D.
Colonne 2
Support de la propriété perspective.
1
3D transformations
2
perspective
Estimation de la prise en charge en pourcentage du parc actuel.
97%
96%

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.

Les spécifications CSS éditées par le W3C sont organisées en modules. perspective fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Visibilité de la face arrière de l'élément (pendant sa rotation).
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Définit une rotation de l'élément.
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Définit la boîte de référence pour les transformations.
Point d'origine pour les transformations.
Rendu des éléments soumis à une transformation 3D.
Définit une translation de l'élément (un déplacement).
Définit un agrandissement ou une réduction de l'élément.

Fonctions.

Applique une transformation composite à un élément (translations, rotations...)
Applique une série de transformations 3D à un élément.
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
Définit une rotation de l'élément autour de l'axe X (en 3D),
Définit une rotation 3D de l'élément autour de l'axe Y.
Définit une rotation de l'élément autour de l'axe Z.
Définit un agrandissement ou une réduction de l'élément.
Définit une mise à l'échelle en 3D.
Définit une mise à l'échelle suivant l'axe X.
Définit une mise à l'échelle suivant l'axe Y.
Définit une mise à l'échelle suivant l'axe Z.
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
Définit une inclinaison de l'élément suivant l'axe X.
Définit une inclinaison de l'élément suivant l'axe Y.
Applique une translation (un déplacement ) à un élément.
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
Définit une translation suivant l'axe X (horizontalement).
Définit une translation suivant l'axe Y (verticalement).
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).