De transform property laat je een element verplaatsen, schalen, roteren en skew — visueel, zonder de documentlay-out te beïnvloeden (andere elementen verschuiven niet). Het is GPU-versneld, wat het ideaal maakt voor animatie.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Meerdere functies worden achtereenvolgens toegepast; het wijzigen van de volgorde verandert het resultaat (eerst roteren dan verplaatsen verschilt van eerst verplaatsen dan roteren).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
In tegenstelling tot het wijzigen van width/margin beïnvloedt een transform alleen het weergegeven uiterlijk van het element, niet zijn box in de flow — dus omringende elementen blijven op hun plaats en er is geen reflow. Dit is precies waarom transforms glad zijn.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
De translate(-50%, -50%) centreringstrick is alomtegenwoordig — het verschuift het element terug met de helft van zijn eigen grootte.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Omdat transforms layout en paint overslaan (alleen compositing), blijven animaties op 60fps — veel goedkoper dan animeren van positie/grootte.
Transforms zijn de werkpaard van CSS-animatie en micro-interacties (hover lifts, modals, carousels, loading spinners).
Ze verplaatsen/schalen/roteren zonder layout te triggeren, dus ze zijn zowel krachtig als performant — de aanbevolen manier om beweging op het web te animeren.