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 :

CSS - Propriété perspective

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.

Attention à la particularité de perspective : c'est une propriété qui s'applique aux enfants de l'élément, et non pas à l'élément lui-même. L'effet de perspective est calculé en considérant que l'observateur est au centre de l'élément parent. Voir la propriété perspective-origin pour changer la position de l'observateur.

Valeurs pour perspective.

  • perspective: none;

    Valeur par défaut. Aucun effet de perspective n'est appliqué.

  • perspective: 200px;

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

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

  • perspective: initial;

    La valeur initiale est none.

  • perspective: unset; perspective: inherit;

    Reportez-vous à la description générale de ces valeurs.

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
Perspective - Point d'observation
Cet élément a été tourné de -30 degrés suivant l'axe Y

Voir aussi...

Transformations géométriques - Propriétés.

Transformations géométriques - 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 de l'élément en 2D (dans le plan de l'écran).
  • rotate3d() : Définit une rotation 3D de l'é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.