A transform tulajdonság lehetővé teszi, hogy egy elemet mozgass, skálázz, forgass és ferdeítsd vizuálisan — anélkül, hogy a dokumentum elrendezését érintené (más elemek nem tolódnak el). GPU-gyorsított, ami ideálissá teszi az animációhoz.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Több függvényt alkalmaznak egymás után; a sorrend megváltoztatása megváltoztatja az eredményt (forgatás majd fordítás eltér a fordítás majd forgatástól).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
A width/margin módosításával ellentétben a transform csak az elem festett megjelenésére hat, nem annak dobozára a folyamban — így a környező elemek a helyükön maradnak, és nincs reflow. Ez pontosan az, hogy miért simaak a transformációk.
/* 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); }
A translate(-50%, -50%) középre helyezési trükk mindenütt jelen van — az elemet visszacsúsztja a saját méretének felével.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Mert a transformációk kihagyják az elrendezést és a festést (csak összeállítás), az animálásuk 60fps-en marad — sokkal olcsóbb, mint az pozícióhoz/mérethez animálni.
A transformációk a CSS animáció és a mikro-interakciók munkalovai (hover lifts, modálisok, karusell, loading spinners).
Mozgat/skáláznak/forgat anélkül, hogy elrendezést váltanának ki, így erősek és hatékonyak is — az ajánlott módszer a mozgás animálásához a weben.