Transform-origin - CSS-trucs | CSS Almanac 2025

De transform-origineigenschap wordt gebruikt in combinatie met CSS-transformaties, zodat u het punt van oorsprong van een transformatie kunt wijzigen.

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

Zoals hierboven aangegeven, kan de transform-origineigenschap maximaal twee door spaties gescheiden trefwoord- of lengtewaarden bevatten voor een 2D-transformatie en maximaal drie waarden voor een 3D-transformatie.

Het gebruik van de bovenstaande code op een 200px bij 200px-box, met de transformatie toegepast op een overgezet met een klikgebeurtenis, zou zich als volgt gedragen:

Kijk eens naar deze pen!

Standaard is de oorsprong van een transformatie "50% 50%", wat precies in het midden van een bepaald element staat. Het veranderen van de oorsprong naar “linksboven” (zoals in de demo hierboven) zorgt ervoor dat het element de linkerbovenhoek van het element als rotatiepunt gebruikt.

Waarden kunnen worden lengtes, percentages of de zoekwoorden top, left, right, bottom, en center.

De eerste waarde is de horizontale positie, de tweede waarde is de verticaal en de derde waarde vertegenwoordigt de positie op de Z-as. De derde waarde werkt alleen als u 3D-transformaties gebruikt en kan geen percentage zijn.

Zie de illustratie van de transformatie-oorsprong van de pen door Shaw (@shshaw) op CodePen.