Perspective() - Fonction CSS

perspective()

Résumé des caractéristiques de la fonction `perspective()`

Description rapide

Définit la hauteur de l'observateur dans le cas d'une transformation 3D.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 1

Statut du document: CR (document candidat à la recommandation)

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 valeur `perspective()` peut être utilisée avec les propriétés suivantes :

transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxes 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 dimension).
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é.

Simulateur avec la fonction `perspective()`

L'effet de perspective est visible lorsqu'une transformation déplace un élément en dehors du plan de l'écran. Le troisième bloc a été tourné suivant l'axe Z : il reste dans le plan de l'écran et la fonction perspective() est donc sans effet sur lui.

transform :

/* Pas de perspective */

perspective( 50px )

perspective( 100px )

rotateX(45deg)

rotateY(-45deg)

rotateZ(45deg)

Compatibilité et prise en charge par les navigateurs.

Tous les navigateurs courants traitent correctement les transformations 3D, ainsi que la fonction perspective() qui est essentielle pour les rendus 3D.

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

Support de la fonction perspective() qui permet de mieux visualiser les effets d'une transformation en 3D.

Remarques :

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

Transformations
3D

Fonction
perspective()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

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

Historique de la fonction `perspective()`.

Module CSS - Transformations - Niveau 1

Introduction des transformations en 3D et de la fonction perspective() dans la spécification.

28 Février 2012
Document de travail.
14 Février 2019
Candidat à la recommandation.

Voir aussi, concernant les transformations.

Le module de spécification "Module CSS - Transformations" (ou CSS Transforms Module en anglais), regroupe toutes les propriétés et fonctions concernant les transformations en CSS :