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
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome
Support complet
Oui
| Edge
Support complet
12
| Firefox
Support complet
16
| IE
Support complet
10
| Opera
Support complet
12.1
| Safari
Support complet
3.1
| WebView Android ? | Chrome Android ? | Edge Mobile
Support complet
Oui
| Firefox Android
Support complet
16
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Three-value syntax | Chrome Support complet Oui | Edge ? | Firefox Support complet 10 | IE Support complet 9 | Opera Aucun support Non | Safari Support complet Oui | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android Aucun support Non | Safari iOS ? | Samsung Internet Android ? |
Support in SVG | Chrome Support complet Oui | Edge ? | Firefox
Support complet
43
| IE Aucun support Non | Opera Support complet Oui | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
- Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.