perspective() - Fonction CSS
Résumé des caractéristiques de la 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.
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 ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
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 CSS 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é mais 0 annule l'effet de perspective.
Simulateur.
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.
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.
perspective()
.
perspective()
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.