perspective - Propriété CSS
Résumé des caractéristiques de la propriété perspective
none
none
perspective
passe progressivement d'une valeur à une autre.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.
Élément non transformé : il est dans le plan 2D
Cet élément a subi une rotation. Sans effet de perspective il parait simplement compressé.
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
Prise en charge par les navigateurs (compatibilité).
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.