Exemple
Réglez le placement de base d'un élément 3D:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Essayez - le vous - même » Définition et utilisation
La propriété perspective d'origine définit où un élément 3D est basé dans le x et l'axe des ordonnées. Cette propriété vous permet de changer la position inférieure des éléments 3D.
Lors de la définition de la propriété perspective d'origine pour un élément, ce sont les éléments enfants qui sont positionnés, pas l'élément lui-même.
Note: Cette propriété doit être utilisé conjointement avec le point de vue des biens, et ne touche que 3D transforme les éléments!
Pour mieux comprendre la propriété perspective d' origine, voir une démonstration .
| Valeur par défaut: | 50% 50% |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.perspectiveOrigin="10px 50%" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| 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;propriété valeurs
| Valeur de la propriété | La description |
|---|---|
| x-axis | Définissant où la vue est placé sur l'axe x Valeurs possibles:
Valeur par défaut: 50% |
| y-axis | Définissant où la vue est placé sur l'axe y Valeurs possibles:
Valeur par défaut: 50% |
| initiale | Définit cette propriété à sa valeur par défaut. Lisez à propos initial |
| hériter | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Pages associées
Tutoriel CSS: CSS 3D Transforms
Référence HTML DOM: perspectiveOrigin property