Transform-origin - CSS-triks | CSS-almanakk 2025

Den transform-origineiendommen er brukt i forbindelse med CSS forvandler, slik at du kan endre utgangspunktet for en transformering.

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

Som angitt ovenfor kan transform-originegenskapen ta opptil to mellomromsseparerte søkeord- eller lengdeverdier for en 2D-transformasjon og opptil tre verdier for en 3D-transformasjon.

Ved å bruke koden ovenfor på en 200px for 200px-boks, med transformasjonen brukt til en overført ved hjelp av en klikkhendelse, vil den oppføre seg slik:

Sjekk ut denne pennen!

Som standard er opprinnelsen til en transformasjon "50% 50%", som er nøyaktig i midten av et gitt element. Hvis du endrer opprinnelsen til "øverst til venstre" (som i demoen ovenfor), får elementet det øverste venstre hjørnet av elementet som et rotasjonspunkt.

Verdier kan være lengder, prosenter eller søkeord top, left, right, bottom, og center.

Den første verdien er den horisontale posisjonen, den andre verdien er den vertikale, og den tredje verdien representerer posisjonen på Z-aksen. Den tredje verdien fungerer bare hvis du bruker 3D-transformasjoner, og den kan ikke være i prosent.

Se pennens transformasjonsopprinnelsesillustrasjon av Shaw (@shshaw) på CodePen.