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