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 simplement0 0) l'origine de transformation est le coin supérieur gauche de la boîte. La paire de valeurs100% 100%place l'origine dans le coin inférieur droit. Dans une paire de valeurs de14% 84%, le point à 14% de la pargeur 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: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: skew(50deg); |
|
transform: skew(50deg); |
|
transform: skew(50deg); |
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| CSS Transforms Level 1 | Working Draft |
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 | ? | ? | ? | ? | ? | ? |