La propriété transform-origin
permet de modifier l'origine du repère pour les opérations de transformation d'un élément.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Par exemple, l'origine par défaut pour la fonction rotate()
est le centre de la rotation. Cette propriété est utilisée en :
- Translatant l'élément avec l'opposé de la valeur fournie
- Appliquant la transformation souhaitée sur l'élément
- Translatant l'élément avec la valeur fournie pour cette propriété.
Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.
Syntaxe
/* Utilisation d'une seule valeur */ transform-origin: 2px; transform-origin: bottom; /* x-offset y-offset */ transform-origin: 3cm 2px; /* y-offset x-offset-keyword */ transform-origin: 2px left; /* x-offset-keyword y-offset */ transform-origin: left 2px; /* x-offset-keyword y-offset-keyword */ transform-origin: right top; /* y-offset-keyword x-offset-keyword */ transform-origin: top right; /* x-offset y-offset z-offset */ transform-origin: 2px 30% 10px; /* y-offset x-offset-keyword z-offset */ transform-origin: 2px left 10px; /* x-offset-keyword y-offset z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword y-offset-keyword z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword x-offset-keyword z-offset */ transform-origin: bottom right 2cm; /* Valeurs globales */ transform-origin: inherit; transform-origin: initial; transform-origin: unset;
La propriété transform-origin
peut être définie en utiisant une, deux ou trois valeurs.
- Avec une valeur, celle-ci doit être :
- Une longueur (type
<length>
) - Un pourcentage (type
<percentage>
- Un mot-clé parmi
left
,center
,right
,top
,bottom
.
- Une longueur (type
- Avec deux valeurs
- La première valeur doit être une longueur (type
<length>
), un pourcentage (type<percentage>
ou un mot-clé parmileft
,center
,right
- La seconde valeur doit être une longueur (type
<length>
), un pourcentage (type<percentage>
ou un mot-clé parmitop
,center
,bottom
.
- La première valeur doit être une longueur (type
- Avec trois valeurs
- Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs
- La troisième valeur doit être une longueur (type
length
Valeur
x-offset
- Une valeur du type
<length>
ou<percentage>
qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée. offset-keyword
- Un mot-clé parmi
left
,right
,top
,bottom
oucenter
qui décrit le décalage correspondant. y-offset
- Une valeur du type
<length>
ou<percentage>
qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée. x-offset-keyword
- Un mot-clé parmi
left
,right
oucenter
qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée. y-offset-keyword
- Un mot-clé parmi
top
,bottom
oucenter
qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée. z-offset
- Une valeur du type
<length>
(et jamais une valeur du type<percentage>
, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..
Les mots-clés sont des raccourcis qui correspondent aux valeurs <percentage>
suivantes :
Mot-clé | Valeur |
---|---|
left |
0% |
center |
50% |
right |
100% |
top |
0% |
bottom |
100% |
Syntaxe formelle
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?où
<length-percentage> = <length> | <percentage>
Exemples
Voir la page sur l'utilisation des transformations CSS pour des exemples supplémentaires.
Exemples live
Code | Exemple |
---|---|
|
<div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; } |
|
<div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); } |
|
<div class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; transform: rotate(30deg); } |
|
<div class="box4"> </div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; transform: rotate(30deg); } |
|
<div class="box5"> </div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -10em -30em; transform: rotate(30deg); } |
|
<div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); } |
|
<div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); transform-origin: 0 0; } |
|
<div class="box8"> </div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); transform-origin: 100% -30%; } |
|
<div class="box9"> </div> .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewX(50deg); transform-origin: 100% -30%; } |
|
<div class="box10"> </div> .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewY(50deg); transform-origin: 100% -30%; } |
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transforms Level 1 La définition de 'transform-origin' dans cette spécification. |
Version de travail | Définition initiale. |
Valeur initiale | 50% 50% 0 |
---|---|
Applicabilité | éléments transformables |
Héritée | non |
Pourcentages | se rapporte à la taille de la boîte de l'élément |
Média | visuel |
Valeur calculée | pour une valeur de type length sa valeur absolue, sinon un pourcentage |
Type d'animation | simple list of length, percentage, or calc |
Ordre canonique | Une ou deux valeurs, avec la longueur en absolue et les mots-clés traduits en pourcentage |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | Oui -webkit- | 12 12 -webkit- | 16 3.5 -moz- 49 -webkit- | 10 9 -ms- | 12.1 10.5 -o- | 3.1 -webkit- |
Three-value syntax | Oui | ? | 10 | 9 | Non | Oui |
Support in SVG | Oui | ? | 432 | Non | Oui | ? |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | ? | ? | Oui Oui -webkit- | 16 4 -moz- 49 -webkit- | ? | ? | ? |
Three-value syntax | ? | ? | ? | ? | Non | ? | ? |
Support in SVG | ? | ? | ? | ? | ? | ? | ? |
1. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
2. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
3. From version 41: this feature is behind the svg.transform-origin.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.