Właściwość transform pozwala przesunąć, skalować, obrócić i pochylić element wizualnie — bez wpływu na układ dokumentu (inne elementy się nie przesuwają). Jest przyspieszany przez GPU, co czyni go idealnym do animacji.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Wiele funkcji jest stosowanych sekwencyjnie; zmiana kolejności zmienia wynik (obrót następnie przesunięcie różni się od przesunięcia następnie obrotu).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
W przeciwieństwie do zmiany width/margin, transformacja wpływa tylko na narysowany wygląd elementu, a nie na jego pole w przepływie — zatem otaczające elementy pozostają na swoim miejscu i nie ma przepływu. To dokładnie dlatego transformacje są gładkie.
/* 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); }
Trick translate(-50%, -50%) do centrowania jest wszechobecny — przesuwa element wstecz o połowę jego własnego rozmiaru.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Ponieważ transformacje pomijają układ i malowanie (tylko komponowanie), animacje pozostają na 60fps — znacznie tańsze niż animowanie pozycji/rozmiaru.
Transformacje są siłą napędową animacji CSS i mikro-interakcji (hover lifts, modals, carousels, loading spinners).
Przesuwają/skalują/obracają bez wyzwalania układu, więc są zarówno potężne, jak i wydajne — zalecanym sposobem animowania ruchu w sieci.