La proprietà transform ti permette di spostare, scalare, ruotare e inclinare un elemento visivamente — senza influenzare il layout del documento (gli altri elementi non si spostano). È accelerato dalla GPU, rendendolo ideale per l'animazione.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Multipli funzioni vengono applicate in sequenza; cambiare l'ordine cambia il risultato (ruotare poi traslare è diverso da traslare poi ruotare).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
A differenza di cambiare width/margin, un transform affetta solo l'aspetto visivo dell'elemento, non la sua box nel flusso — quindi gli elementi circostanti rimangono al loro posto e non c'è reflow. È esattamente per questo che i transform sono fluidi.
/* 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); }
Il trucco del centraggio translate(-50%, -50%) è ubiquo — sposta l'elemento indietro della metà della sua stessa dimensione.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Poiché i transform saltano layout e paint (solo compositing), animarli mantiene 60fps — molto più economico rispetto ad animare position/size.
I transform sono il cavallo da battaglia dell'animazione CSS e delle micro-interazioni (hover lifts, modali, carousel, spinner di caricamento).
Spostano/scalano/ruotano senza attivare layout, quindi sono sia potenti che performanti — il modo consigliato per animare il movimento sul web.