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 - Fonction perspective()

Description de la fonction perspective().

La fonction perspective() définit la distance entre l'observateur et l'élément suivant l'axe Z. Tant que les transformations se passent dans le plan de l'écran (suivant l'axe X ou l'axe Y), la perspective est sans effet. Mais les transformations qui déplacent l'élément suivant l'axe Z seront soumises à la perspective : si l'élément se rapproche il sera grossit, s'il s'éloigne il sera réduit.

Référentiel pour la fonction perspective()

Exemple : les trois blocs ci-dessous ont des dimensions identiques. Le premier est dans le plan de l'écran : ses dimensions sont inchangées ; le deuxième a été reculé, avec une valeur négative pour translatez(); et le troisième a été avancé.
Cliquez sur les blocs pour afficher leur code CSS. Vous constaterez qu'ils ont bien tous les mêmes dimensions. Leur différence de taille n'est due qu'a leur éloignement par rapport à l'observateur. Cliquez sur les exemples pour afficher leur code CSS.

translatez(0)
translatez(-100px)
translatez(100px)

Il existe aussi une propriété perspective qui a un rôle comparable, mais avec cependant une différence : la propriété s'applique au parent de l'élément transformé, tandis que la fonction s'applique à l'élément lui-même, via la propriété transform.

La fonction perspective() peut être utilisée avec :

  • transform : Applique une transformation géométrique.

Syntaxe de la fonction perspective().

  • transform: perspective(200px); h

    h est un nombre positif suivi d'une unité de dimension absolue (Voir les unités de dimensions en CSS).
    Il définit la hauteur de l'observateur, autrement dit la distance entre l'observateur et l'élément suivant l'axe Z. Plus ce nombre est faible, plus l'effet de perspective sera marqué mais 0 annule l'effet de perspective.

Simulateur.

transform:
( h )
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement les transformations 3D.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Transformations géométriques - 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.
  • transform : Applique une transformation géométrique.
  • transform-origin : Point d'origine pour certaines transformations.
  • transform-style : Rendu des éléments soumis à une transformation 3D.

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.
  • 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.