Svojstvo transform vam omogućava pomicanje, skaliranje, rotaciju i iskošenje elementa vizualno — bez utjecaja na raspored dokumenta (ostali elementi se ne pomiču). Ubrzano je GPU-om, što ga čini idealnim za animaciju.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Više funkcija primjenjuje se uzastopno; promjena redoslijeda mijenja rezultat (rotacija zatim translacija razlikuje se od translacije zatim rotacije).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Za razliku od promjene width/margin, transformacija utječe samo na nacrtani izgled elementa, ne na njegovu kutiju u toku — pa okolni elementi ostaju na mjestu i nema reflow-a. To je upravo razlog zašto su transformacije glatke.
/* 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); }
Trik centriranja translate(-50%, -50%) je sveprisutan — pomjera element unazad za polovicu svoje vlastite veličine.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Jer transformacije preskačuapparat i bojenje (samo compositing), njihova animacija ostaje na 60fps — daleko jeftinija od animiranja položaja/veličine.
Transformacije su radni konj CSS animacije i mikro-interakcija (hover lifts, modali, karuseli, loading spinners).
Oni pomiču/skaliraju/rotiraju bez pokretanja rasporeda, pa su i moćni i efikasni — preporučeni način za animiranje kretanja na webu.