Egenskapen transform låter dig flytta, skala, rotera och skeva ett element visuellt — utan att påverka dokumentlayouten (andra element förskjuts inte). Det är GPU-accelererat, vilket gör det idealiskt för animering.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Flera funktioner appliceras i sekvens; att ändra ordningen ändrar resultatet (rotera sedan translate skiljer sig från translate sedan rotera).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Olikt att ändra width/margin påverkar en transform endast elementets målade utseende, inte dess ruta i flödet — så omgivande element förblir på plats och det finns ingen omflöde. Det är exakt varför transformationer är smidiga.
/* 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); }
Tricket translate(-50%, -50%) för centrering är allestädes närvarande — det förskjuter elementet tillbaka med halva dess egen storlek.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Eftersom transformationer hoppar över layout och målning (bara kompositing), förblir animering av dem på 60fps — mycket billigare än att animera position/storlek.
Transformationer är arbetshästen för CSS-animering och mikro-interaktioner (hovra-lyft, modaler, karuseller, laddningsspinnare).
De flytta/skalera/roterar utan att utlösa layout, så de är både kraftfulla och effektiva — det rekommenderade sättet att animera rörelse på webben.