Egenskapen transform lar deg flytte, skalere, rotere og skew et element visuelt — uten å påvirke dokumentoppsettet (andre elementer skifter ikke). Det er GPU-akselerert, noe som gjør det ideelt for animasjon.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Flere funksjoner brukes i rekkefølge; endring av rekkefølgen endrer resultatet (rotere deretter oversette er annerledes enn å oversette deretter rotere).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
I motsetning til endring av width/margin, påvirker en transform bare elementets malte utseende, ikke boksen i strømmen — så omkringliggende elementer blir værende på plass og det er ingen reflow. Dette er nøyaktig hvorfor transforms 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%) sentrerings-trikset er allestedsnærværende — det skifter elementet tilbake med halvparten av dets eget størrelse.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Fordi transforms hopper over layout og maling (bare komposering), forblir animasjoner på 60fps — mye billigere enn å animere posisjon/størrelse.
Transforms er arbeidshesten for CSS-animasjon og mikro-interaksjoner (hover lifts, modaler, karuseller, innlastingsspinnere).
De flytter/skalerer/roterer uten å utløse layout, så de er både kraftige og effektive — den anbefalte måten å animere bevegelse på nettet.