Attribut PERSPECTIVE-ORIGIN

Rôle

L’attribut perspective-origin permet de régler le point de fuite d’une transformation 3D. Par défaut ce point est situé au centre du conteneur.

Cette propriété doit être utilisée avec la propriété perspective sur l’élément parent et ne concerne que les éléments transformés en 3D!

Note : Ce sont les éléments enfants qui subissent la perspective et non pas l’élément lui-même.

Dans cet exemple, pour la première image le point de fuite se situe an centre du bloc qui la contient. Pour la deuxième image ce point se trouve au milieu sur l’horizontal mais en haut sur la vertical.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.perspectiveOrigin

Compatibilité

L’attribut perspective-origin est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -ms-(Internet Explorer…), -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra).

Valeurs

Les différentes valeurs de l’attribut perspective sont:

x-axis

Valeurs possibles dur l’axe des x : left, right, center, length, %.

Valeur par défaut : 50%.
Syntaxe :
perspective-origin : 50% 0

y-axis

Valeurs possibles dur l’axe des y : bottom, top, center, length, %.

Valeur par défaut : 50%.
Syntaxe :
perspective-origin : 50% 0

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
perspective-origin : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
perspective-origin : inherit

A voir aussi

transition– transition-duration– transition-property– transition-timing-function