Egenskaben transform lader dig flytte, skalere, rotere og skæve et element visuelt — uden at påvirke dokumentlayoutet (andre elementer bevæger sig ikke). Det er GPU-accelereret, hvilket gør det ideelt til animation.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Flere funktioner anvendes sekventielt; ændring af rækkefølgen ændrer resultatet (rotation og derefter oversættelse er forskelligt fra oversættelse og derefter rotation).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
I modsætning til at ændre width/margin påvirker en transformation kun elementets malet udseende, ikke dets box i flowet — så omgivende elementer forbliver på plads, og der er ingen reflow. Det er præcis derfor, transformationer er glatte.
/* 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); }
translate(-50%, -50%) centrerings-tricket er allestedsnærværende — det skubber elementet tilbage med halvdelen af sin egen størrelse.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Fordi transformationer springer layout og painting over (kun compositing), animering af dem forbliver ved 60fps — meget billigere end at animere position/størrelse.
Transformationer er arbejdshesten for CSS-animation og mikro-interaktioner (hover-løft, modaler, karuseller, loading-spinners).
De flytter/skalerer/roterer uden at udløse layout, så de er både kraftfulde og effektive — den anbefalede måde at animere bevægelse på nettet.