Exemple
Réglez le placement de base d'un élément en rotation:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Essayez - le vous - même » Définition et utilisation
La propriété transform d'origine vous permet de changer la position des éléments transformés.
les transformations 2D peuvent changer les directions x et l'axe y d'un élément. transformations 3D peuvent également modifier l'axe z d'un élément.
Pour mieux comprendre la propriété transform d' origine, voir une démonstration .
Note: Cette propriété doit être utilisée conjointement avec la transformation de la propriété.
Tip: Pour mieux comprendre cette propriété pour la 3D transforme, voir une démonstration .
| Valeur par défaut: | 50% 50% 0 |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.transformOrigin="0 0" 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-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36,0 4.0 -webkit- | 10.0 9,0 -ms- | 16,0 3.5 -moz- | 9.0 3.2 -webkit- | 23,0 15,0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36,0 12,0 -webkit- | 10.0 | 16,0 10.0 -moz- | 9.0 4.0 -webkit- | 23,0 15,0 -webkit- |
Syntaxe CSS
transform-origin:x-axis y-axis z-axis|initial|inherit;propriété valeurs
| Valeur de la propriété | La description |
|---|---|
| x-axis | Définit où la vue est placé à l'axe des x. Valeurs possibles:
|
| y-axis | Définit où la vue est placé à l'axe des ordonnées. Valeurs possibles:
|
| z-axis | Définit où la vue est placé à l'axe z (for 3D transformations) les (for 3D transformations) . Valeurs possibles:
|
| 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 2D Transforms
Tutoriel CSS: CSS 3D Transforms
Référence HTML DOM: transformOrigin property