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.

Valeur initiale50% 50% 0
Applicabilitééléments transformables
Héritéenon
Pourcentagesse rapporte à la taille de la boîte de l'élément
Médiavisuel
Valeur calculéepour une valeur de type length sa valeur absolue, sinon un pourcentage
Type d'animationsimple list of length, percentage, or calc
Ordre canoniqueUne ou deux valeurs, avec la longueur en absolue et les mots-clés traduits en pourcentage

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 :

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>?


<length-percentage> = <length> | <percentage>

Exemples

Voir la page sur l'utilisation des transformations CSS pour des exemples supplémentaires.

Exemples live

Code Exemple

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -10em -30em;

transform: scale(1.9);

transform: scale(1.9);
transform-origin: 0 0;

transform: scale(1.9);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui -webkit-

Oui

Oui -webkit-

16

3.5 -moz-

49 -webkit-

44 -webkit- 1

10

9 -ms-

12.1

10.5 -o-

3.1 -webkit-
Three-value syntax Oui ?109 Non Oui
Support in SVG Oui ?

432

41 —?2 3

Non Oui ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple ? ?

Oui

Oui -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

8.1 -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.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Prinz_Rana, Sebastianz, antograssiot, teoli, FredB
 Dernière mise à jour par : SphinxKnight,