Vlastnost transform vám umožňuje pohybovat, měnit měřítko, otáčet a skloňovat prvek vizuálně — bez ovlivnění rozvržení dokumentu (ostatní prvky se neposunou). Je akcelerovláno GPU, což ji činí ideální pro animace.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Níce funkcí je aplikováno postupně; změna pořadí změní výsledek (otáčení a následné přesunutí se liší od přesunutí a následného otáčení).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Na rozdíl od změny width/margin transformace ovlivňuje pouze vykreslený vzhled prvku, nikoli jeho box v toku — takže okolní prvky zůstávají na místě a nedochází k přetékání. To je přesně důvod, proč jsou transformace hladké.
/* 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%) pro centrování je všudypřítomný — posune prvek zpět o polovinu jeho vlastní velikosti.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Protože transformace přeskakují rozvržení a kreslení (pouze skládání), jejich animace zůstává na 60fps — mnohem levnější než animace polohy/velikosti.
Transformace jsou pracovním koněm CSS animací a mikro-interakcí (efekty při najetí, modály, karusely, indikátory načítání).
Pohybují/měří/otáčejí bez spouštění rozvržení, takže jsou jak výkonné, tak efektivní — doporučený způsob animace pohybu na webu.