La propriété transform-origin
permet de modifier l'origine du repère pour les opérations de transformation d'un élément.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
Par défaut, l'origine d'une transformation est center
.
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.
Code | Exemple |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
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 |
Compatibilité des navigateurs
BCD tables only load in the browser