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

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
  • Un pourcentage
  • Un mot-clé parmi left, right, center, bottom et top
• Avec deux valeurs
  • La première valeur doit être une longueur, un pourcentage ou un mot-clé parmi left, center et right
  • La deuxième valeur doit être une longueur, un pourcentage ou un mot-clé parmi top, center et bottom
• Avec trois valeurs
  • Les deux premières valeurs doivent être structurées comme ci-dessus
  • La troisième valeur doit être une longueur

Chaque mot-clé correspond à une valeur exprimée en pourcentage :

left		0%
top		0%
right		100%
bottom		100%
center		50%

Les valeurs autorisées sont :

x-offset Une valeur de longueur ou un pourcentage 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 de longueur ou un pourcentage 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 de longueur (Jamais un pourcentage, 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).

transform: none;

transform: rotate(45deg);

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

transform: skewx(45deg);

transform: skewy(45deg); transform-origin: 75% -30%;