transform-origin

La propriété transform-origin permet de modifier l'origine du repère pour les opérations de transformation d'un élément. Par exemple, l'origine par défaut pour la fonction rotate() est le centre de la rotation. Cette propriété est utilisée en :

1. Translatant l'élément avec l'opposé de la valeur fournie
2. Appliquant la transformation souhaitée sur l'élément
3. Translatant l'élément avec la valeur fournie pour cette propriété.

/* 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;

Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.

Syntaxe

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.
• Avec deux valeurs
  • La première valeur doit être une longueur (type <length>), un pourcentage (type <percentage> ou un mot-clé parmi left, center, right
  • La seconde valeur doit être une longueur (type <length>), un pourcentage (type <percentage> ou un mot-clé parmi top, center, bottom.
• 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 ou center 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 ou center 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 ou center 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 :

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

<div class="box1">&nbsp;</div>

.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}

<div class="box2">&nbsp;</div>

.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box3">&nbsp;</div>

.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box4">&nbsp;</div>

.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box5">&nbsp;</div>

.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -10em -30em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box6">&nbsp;</div>

.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
}

<div class="box7">&nbsp;</div>

.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
}

<div class="box8">&nbsp;</div>

.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-transform-origin: 100% -30%;
}

<div class="box9">&nbsp;</div>

.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
transform-origin: 100% -30%;
-webkit-transform: skewX(50deg);
-moz-transform: skewX(50deg);
-o-transform: skewX(50deg);
}

<div class="box10">&nbsp;</div>

.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
-moz-transform: skewY(50deg);
-o-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-transform-origin: 100% -30%;
}

Spécifications

Compatibilité des navigateurs

[1] Internet Explorer 5.5 et les versions supérieures supportent un filtre matricielle, propriétaire, qui peut être utilisé pour obtenir des effets similaires.

[2] Voir la documentation MSDN pour transform-origin.

[3] La gestion des pourcentages pour les éléments SVG était activée avec la préférence svg.transform-origin.enabled (par défaut avec false). Les mots-clés et les pourcentages font référence au canevas plutôt qu'à l'objet courant. Voir bug 1209061.

[4] Les mots-clés et les pourcentages font référence au canevas plutôt qu'à l'objet courant. Voir bug 1209061.

[5] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

• Utiliser les transformations CSS