Propriété CSS perspective-origin
Exemple
Définissez à partir de quelle position l'utilisateur regarde l'élément positionné en 3D :
#div1
{
perspective: 100px;
perspective-origin: left;
}
Définition et utilisation
La perspective-origin
propriété définit à partir de quelle position l'utilisateur regarde l'élément positionné en 3D.
Lors de la définition de la perspective-origin
propriété d'un élément, ce sont les éléments CHILD qui obtiendront l'effet, PAS l'élément lui-même.
Remarque : Cette propriété doit être utilisée conjointement avec la propriété perspective !
Pour mieux comprendre la propriété perspective-origin, visionnez une démo .
Valeur par défaut: | 50% 50% |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.perspectiveOrigin="10px 50%" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Syntaxe CSS
perspective-origin: x-axis y-axis|initial|inherit;
Valeurs de propriété
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Transformations 3D CSS
Référence HTML DOM : propriété perspectiveOrigin