Transformaties in CSS laten toe om elementen te roteren, te schalen, te bewegen of te kantelen. Hiervoor wordt de eigenschap `transform` gebruikt, gevolgd door verschillende functies die het soort transformatie aangeven. Hier zijn enkele voorbeelden:
- Roteren: je kunt een element een bepaald aantal graden roteren met `rotate`. Bijvoorbeeld: `transform: rotate(20deg);` draait het element 20 graden tegen de klok in.
- Schalen: je kunt de grootte van een element aanpassen met `scale`. Bijvoorbeeld: `transform: scale(1.5);` vergroot het element met 50%.
- Verplaatsen: je kunt een element verplaatsen met `translate`. Bijvoorbeeld: `transform: translate(50px,100px);` verplaatst het element 50 pixels naar rechts en 100 pixels naar beneden.
- Kantelen: je kunt een element kantelen met `skew`. Bijvoorbeeld: `transform: skew(20deg);` kantelt het element 20 graden tegen de klok in.
Daarnaast kun je ook meerdere transformaties tegelijk toepassen door ze te scheiden met spaties. Bijvoorbeeld: `transform: rotate(20deg) scale(1.5);` roteert en vergroot het element.
Vergeet niet dat sommige browsers nog steeds vendor-prefixes nodig hebben voor de `transform` eigenschap, dus het is een goed idee om `-webkit-transform`, `-ms-transform` en `-moz-transform` ook op te nemen om compatibiliteit te garanderen.
