Transform-origin - Astuces CSS

La transform-originpropriété est utilisée conjointement avec les transformations CSS, vous permettant de modifier le point d'origine d'une transformation.

.box ( transform: rotate(360deg); transform-origin: top left; )

Comme indiqué ci-dessus, la transform-originpropriété peut prendre jusqu'à deux valeurs de mot-clé ou de longueur séparées par des espaces pour une transformation 2D et jusqu'à trois valeurs pour une transformation 3D.

L'utilisation du code ci-dessus sur une boîte de 200 pixels par 200 pixels, avec la transformation appliquée à une transition à l'aide d'un événement de clic, se comporterait comme ceci:

Découvrez ce stylo!

Par défaut, l'origine d'une transformation est «50% 50%», ce qui est exactement au centre d'un élément donné. Si vous modifiez l'origine en «haut à gauche» (comme dans la démonstration ci-dessus), l'élément utilise le coin supérieur gauche de l'élément comme point de rotation.

Les valeurs peuvent être des longueurs, des pourcentages ou des mots - clés top, left, right, bottom, et center.

La première valeur est la position horizontale, la deuxième valeur est la verticale et la troisième valeur représente la position sur l'axe Z. La troisième valeur ne fonctionnera que si vous utilisez des transformations 3D et ne peut pas être un pourcentage.

Voir l'illustration de l'origine de la transformation Pen par Shaw (@shshaw) sur CodePen.