transform-origin

Résumé

La propriété CSS transform-origin permet de modifier l'origine pour les transformations d'un élément. Par exemple, l'origine de transformation de la fonction rotate() est le centre de rotation. (Cette propriété est appliquée en faisant translater l'élément de l'opposé de la valeur spécifiée, puis en appliquant la transformation et en translatant de la valeur spécifiée.)

  • Valeur initiale 50% 50% 0
  • S'applique à éléments transformables
  • Héritée non
  • Pourcentages se rapporte à la taille de la boîte de l'élément
  • Média visual
  • Valeur calculée pour une valeur de type <longueur> sa valeur absolue, sinon un pourcentage
  • Animable oui, comme une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • Ordre canonique One or two values, with length made absolute and keywords translated to percentages

Syntaxe

transform-origin:  [ <pourcentage> | <longueur> | left | center | right ]
                   [ <pourcentage> | <longueur> | top | center | bottom ] ?
transform-origin:  [ left | center | right ] || [ top | center | bottom ]

Valeurs

Accepte une ou deux valeurs.

  • Une valeur définit la position horizontale, la position verticale est fixée à 50%.
  • Deux valeurs définissent d'abord la position horizontale puis la position verticale.

La combinaison de mots-clés, de valeurs de <longueur>, ou de <percentage> sont permises, mais si les mots-clés sont mélangés avec d'autres valeurs, left et right ne peuvent être utilisés que pour la première valeur, et top et bottom ne peuvent être utilisés que pour la seconde valeur. Les positions négatives sont acceptées.

<pourcentage>
En utilisant la paire de valeurs 0% 0%, (ou simplement 0 0) l'origine de transformation est le coin supérieur gauche de la boîte. La paire de valeurs 100% 100% place l'origine dans le coin inférieur droit. Dans une paire de valeurs de 14% 84%, le point à 14% de la largeur et 84% de la hauteur est l'origine.
<longueur>
Avec la paire de valeur 2cm 1cm, l'origine est placée 2cm à droite et 1cm en-dessous du coin supérieur gauche de l'élément.
top left | left top
Identique à 0 0
top | top center | center top
Identique à 50% 0
right top | top right
Identique à 100% 0
left | left center | center left
Identique à 0 50%
center | center center
Identique à 50% 50% (valeur par défaut)
right | right center | center right
Identique à 100% 50%
bottom left | left bottom
Identique à 0 100%
bottom | bottom center | center bottom
Identique à 50% 100%
bottom right | right bottom
Identique à 100% 100%

Exemples

Voir Utilisation des transformations CSS pour des exemple.

Exemples en direct

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: skew(50deg);  
transform: skew(50deg);
transform-origin: 0 0;
 
transform: skew(50deg);
transform-origin: 100% 100%;
 

Spécifications

Spécification Statut Commentaire
CSS Transforms Level 1
La définition de 'transform-origin' dans cette spécification.
Version de travail  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui) -webkit 3.5 (1.9.1)-moz 10.0
9.0-ms
10.5-o 3.1-webkit
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ? ?
Note : Internet Explorer 5.5 ou plus supporte un filtre matriciel (en) propriétaire qui permet d'obtenir l'effet similaire.

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : antograssiot,