Transform-origin - CSS-tricks | CSS Almanack 2025

Det transform-originFastigheten används tillsammans med CSS-omvandlingar, så att du ändrar utgångspunkten för en transformation.

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

Som angivits ovan kan transform-originegenskapen ta upp till två mellanslag-nyckelord eller längdvärden för en 2D-transform och upp till tre värden för en 3D-transform.

Att använda koden ovan på en ruta 200 x 200 pixlar, med transformen som tillämpas på en övergång med en klickhändelse, skulle fungera så här:

Kolla in den här pennan!

Som standard är en transforms ursprung "50% 50%", vilket är exakt i mitten av ett visst element. Om du ändrar ursprunget till “uppe till vänster” (som i demo ovan) får elementet att använda det övre vänstra hörnet på elementet som en rotationspunkt.

Värden kan vara längder, procentsatser eller sökord top, left, right, bottom, och center.

Det första värdet är det horisontella läget, det andra värdet är det vertikala och det tredje värdet representerar positionen på Z-axeln. Det tredje värdet fungerar bara om du använder 3D-omvandlingar, och det kan inte vara en procentsats.

Se Pen-transform-origin-illustrationen av Shaw (@shshaw) på CodePen.