Propriété de perspective CSS
Exemple
Donnez une certaine perspective à un élément positionné en 3D :
#div1
{
perspective: 100px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La perspective
propriété est utilisée pour donner une certaine perspective à un élément positionné en 3D.
La perspective
propriété définit la distance entre l'objet et l'utilisateur. Ainsi, une valeur inférieure entraînera un effet 3D plus intense qu'une valeur supérieure.
Lors de la définition de la perspective
propriété d'un élément, ce sont les éléments CHILD qui obtiennent la vue en perspective, PAS l'élément lui-même.
Conseil : examinez également la propriété perspective-origin , qui définit à quelle position l'utilisateur regarde l'objet 3D.
Pour mieux comprendre la propriété de perspective, visionnez une démo .
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.perspective="50px" |
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 | 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: length|none;
Valeurs de propriété
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Créez un cube et définissez différentes perspectives :
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Pages connexes
Tutoriel CSS : Transformations 3D CSS
Référence HTML DOM : propriété perspective