CSS Transform: gids voor 2D- en 3D-effecten

Met de eigenschap css transform kun je een element visueel verplaatsen, draaien, schalen en scheeftrekken zonder de ruimte te veranderen die het inneemt. Een kaart bij hover iets groter maken, een menu vanaf de zijkant binnenschuiven of een element in 3D omklappen: bijna al deze effecten zijn op deze ene eigenschap gebouwd. Het mooiste is dat deze transformaties, mits correct gebruikt, de layoutherberekening van de browser niet activeren, waardoor ze hét middel zijn voor vloeiende animaties op 60 fps.

Wat doet transform precies?

Wanneer je transform op een element toepast, verplaatst de browser het gerenderde beeld van het element. Het oorspronkelijke vak in de documentstroom blijft staan: naburige elementen verschuiven niet, de pagina herschikt niet. Dat is wezenlijk anders dan herpositioneren met margin of top, die een layoutherberekening forceren, terwijl transform alleen de compositiefase raakt.

Je kunt meerdere functies op één regel aaneenschakelen, gescheiden door spaties. De volgorde is belangrijk, want elke functie wijzigt het coördinatenstelsel van de volgende:

.kaart {
  transform: translateX(20px) rotate(8deg) scale(1.1);
}

translate: verschuiven

translate() verschuift een element langs de horizontale en verticale as. Er zijn translateX(), translateY() en de vorm met twee waarden translate(x, y). Procentwaarden zijn relatief aan de eigen grootte van het element, wat ontzettend handig is voor centreren:

.midden {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hier wordt het element eerst zo geplaatst dat de linkerbovenhoek in het midden staat, waarna translate(-50%, -50%) het met de helft van zijn eigen breedte en hoogte terugtrekt om het perfect te centreren. Een klassiek patroon dat nog steeds erg nuttig is.

rotate en scale

rotate() draait een element standaard rond zijn middelpunt; je geeft de waarde in deg, rad of turn (1turn = 360 graden). Positieve waarden draaien met de klok mee.

scale() vergroot of verkleint een element. scale(1.2) vergroot beide assen met 20%; scale(2, 0.5) verdubbelt de breedte en halveert de hoogte. Waarde 1 is de oorspronkelijke grootte, 0 laat het element volledig verdwijnen.

.knop {
  transition: transform 0.2s ease;
}
.knop:hover {
  transform: scale(1.05);
}

Er is ook skew(), dat het element langs de assen scheeftrekt. In de praktijk wordt het minder vaak gebruikt dan translate, rotate en scale, maar het is handig voor decoratieve banden en cursief-achtige effecten.

transform-origin: het ankerpunt van de transformatie

Al deze functies werken ten opzichte van een oorsprongspunt. De standaard is 50% 50%, oftewel het midden van het element. Je kunt dit wijzigen met transform-origin:

.vlag {
  transform-origin: left center;
  transform: rotate(15deg);
}

In dit voorbeeld zwaait het element vanaf de linkerrand als een vlag. transform-origin instellen is essentieel om een dropdown vanuit een hoek te laten groeien of een wijzer rond zijn basis te draaien.

3D-transformaties en perspective

Het wordt interessant zodra je een derde as toevoegt. rotateX(), rotateY(), rotateZ() en translateZ() bewegen het element in de diepte. Maar om 3D echt "diep" te laten lijken, moet je een perspective definiëren; anders ziet de transformatie er plat uit.

perspective wordt op twee manieren opgegeven: als CSS-eigenschap op het ouderelement dat de 3D-elementen bevat, of als functie binnen transform. Op het ouderelement plaatsen verdient de voorkeur, zodat broer-elementen dezelfde scène delen:

.scene {
  perspective: 800px;
}
.scene:hover .zijde {
  transform: rotateY(180deg);
}

Dat is precies het "flip card"-effect dat de achterkant van een kaart toont bij hover. Door transform-style: preserve-3d aan de container toe te voegen, blijven geneste kinderen in de 3D-ruimte staan in plaats van plat te worden. En backface-visibility: hidden verbergt de achterzijde van een vlak, wat flip-effecten netjes houdt.

Prestaties: waarom transform de voorkeur heeft

Om een frame te tekenen doorloopt de browser meerdere fasen: layout (geometrie berekenen), paint (pixels invullen), composite (lagen samenvoegen). Het animeren van width, top of margin hertriggert de layout bij elk frame, wat duur is en hapering veroorzaakt. Het animeren van transform en opacity draait daarentegen alleen in de compositiefase en kan meestal aan de GPU worden overgedragen.

• Gebruik voor positieanimaties translate in plaats van left/top.
• Gebruik voor grootteanimaties scale in plaats van width/height.
• Voeg will-change: transform toe om de browser vooraf te laten weten dat er een nieuwe laag komt — maar alleen op een beperkt aantal elementen die daadwerkelijk animeren; overmatig gebruik laat het geheugen oplopen.

Denk voor toegankelijkheid aan gebruikers met vestibulaire gevoeligheid en temper of schakel grote bewegingen uit binnen @media (prefers-reduced-motion: reduce).

Veelgestelde vragen

Waarom is transform animeren vloeiender dan left/top?

Omdat transform de layout- en meestal ook de paintfase van de browser overslaat en direct op de compositielaag werkt, waar de GPU het kan versnellen. left/top herberekent daarentegen de layout bij elk frame, wat lage fps veroorzaakt.

Maakt de volgorde van meerdere transform-functies uit?

Ja. Functies worden van links naar rechts toegepast en elke functie wijzigt het coördinatenstelsel. rotate gevolgd door translate geeft een ander resultaat dan translate gevolgd door rotate; experimenteer met de volgorde tot je het gewenste effect krijgt.

Wat is nodig om translateZ zichtbaar te maken?

Een perspective-waarde. Zonder gedefinieerde perspective projecteert beweging langs de Z-as plat op het scherm en ontstaat er geen diepte. Zet perspective op de oudercontainer en ondersteun het met transform-style: preserve-3d.

Wil je een vloeiende, performante interface? Ik zet CSS transform en moderne animatietechnieken correct op in jouw project. Neem contact op om samen te werken.