perspective() CSS fonction

Définition de la CSS perspective().

La fonction de Perspective CSS perspective(Z) de la propriété de Transformation CSS transform permet de spécifier la distance entre "le point de vue" virtuel et le point d'origine Z = 0 sur l'axe de perspective Z. Mais contrairement à la propriété de Transformation 3D perspective le contexte 3D est lui même et non celui de son parent et la transformation s'applique à lui même et non à ses enfants.

Exemple de syntaxe CSS perspective() :

transform : perspective(20px) rotateY(15deg);
transform : perspective(0.5em) rotateY(15deg);

La fonction de Perspective CSS perspective(paramètre) accepte comme paramètre de perspective :

nombre : supérieur à zéro suivi d'une unité CSS de longueur(px, em, ...), sauf %.
Dans ce cas où le paramètre est pas passé ou invalide, la fonction ne sera pas prise en compte.

Exemple de code perspective() CSS

Conditions d'application de la CSS perspective().

La fonction de Perspective CSS perspective() est applicable à la propriété de Transformation CSS transform et avec ses propriétés de Transformation préfixées (-moz-transform, -webkit-transform, -ms-transform).

Problème d'interprétation de perspective() en Css.

La propriété de Transformation CSS transform n'est reconnue par certains navigateurs.

Conditions d'animation de perspective() en CSS3.

Mettez transform comme valeur de la propriété de Transformation CSS transition-property.

La CSS perspective() est une fonction de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour perspective().

Effets selon la valeur de la Css perspective

Plus la valeur sera proche de 0, plus les effets sur l'axe Z seront extrêmes sur le plan de rendu. A l'inverse plus valeur sera loin de 0, plus les effets sur l'axe Z seront modérés sur le plan de rendu.
Attention à l'ordre de déclaration de perspective()

Code CSS :

transform: perspective(150px) translateZ(-20px);
/* différent de */
transform: translateZ(-20px) perspective(150px);

Décaler le point de fuite de la perspective Css

décaler le point de fuite Par défaut, le point de fuite se trouve au centre du contexte 3D. Vous pouvez le décaler sur l'axe X ou Z avec la propriété de Transformation CSS transform-origin.

Compatibilités navigateurs de la fonction perspective()

Détails des versions de la CSS perspective(): Fonction perspective() est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS perspective(): Fonction CSS perspective() est compatible à partir de Chrome 12; Fonction CSS perspective() est compatible à partir de Firefox 10; Fonction CSS perspective() est compatible à partir de Internet Explorer 10; Fonction CSS perspective() est compatible à partir de Opera 15; Fonction CSS perspective() est compatible à partir de Safari 4

Votre avis sur la définition perspective() en CSS

Votez pour la définition CSS `perspective()`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.

Définitions annexes à la Css perspective()

Définitions CSS annexes perspective()

-moz-transform: La propriété de Transformation CSS -MOZ-TRANSFORM permet de spécifier les transformations 2D et 3D à appliquer à un élément HTML.Exemple d'écriture CS...[ -moz-transform ]
-ms-transform: La propriété de Transformation CSS -MS-TRANSFORM permet de spécifier les transformations 2D à appliquer sur un élément HTML. Exemple d'écriture CSS de...[ -ms-transform ]
-webkit-transform: La propriété de Transformation CSS -WEBKIT-TRANSFORM permet de spécifier les transformations 2D ou 3D à appliquer à un élément HTML. Exemple d'écritur...[ -webkit-transform ]
perspective: La propriété de Transformation CSS 3D PERSPECTIVE permet d'activer perspective en spécifiant la distance entre "le point de vue" virtuel et le point d...[ perspective ]
perspective(): La fonction de Perspective CSS perspective(Z) de la propriété de Transformation CSS transform permet de spécifier la distance entre "le point de vue" ...[ perspective() ]
transform: La propriété de Transformation CSS TRANSFORM permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.Exemple d'écriture...[ transform ]
transform-origin: La propriété de Transformation CSS TRANSFORM-ORIGIN permet de spécifier le point d'origine des transformations 2d ou 3d lors de l'utilisation de la pr...[ transform-origin ]
transition-property: La propriété de Transition CSS TRANSITION-PROPERTY permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leu...[ transition-property ]