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

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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 16
Support complet 16
Support complet 3.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 10
Support complet 10
Support complet 9
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1
Support complet 12.1
Support complet 10.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 3.1
Préfixée
Support complet 3.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android ? Chrome Android ? Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Support complet 16
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Three-value syntaxChrome Support complet OuiEdge ? Firefox Support complet 10IE Support complet 9Opera Aucun support NonSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android Aucun support NonSafari iOS ? Samsung Internet Android ?
Support in SVG
Expérimentale
Chrome Support complet OuiEdge ? Firefox Support complet 43
Notes
Support complet 43
Notes
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Aucun support 41 — ?
Notes Désactivée
Notes Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Désactivée 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.
IE Aucun support NonOpera Support complet OuiSafari ? 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.

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,