6XC

Generatore di Transform CSS

Combina rotate, scale, translate e skew visivamente e copia il CSS transform risultante.

970 visualizzazioni

La Proprietà transform

transform sposta, ruota, scala e inclina un elemento senza influenzare il flusso del documento, ed è accelerata dalla GPU — ecco perché transform (insieme a opacity) è la proprietà preferita per animazioni fluide. Le funzioni vengono applicate da destra a sinistra, quindi il loro ordine conta: rotate(45deg) translateX(50px) non è lo stesso del contrario.

Domande Frequenti

Perché l'ordine delle funzioni è importante?

Ogni funzione trasforma il sistema di coordinate per quella successiva. translate seguito da rotate sposta prima e poi ruota sul posto; rotate seguito da translate ruota prima l'asse, quindi il movimento diventa diagonale.

transform influisce sugli elementi circostanti?

No — l'elemento mantiene il suo spazio originale nel layout. Questo rende le trasformazioni economiche da animare, ma richiede attenzione alle sovrapposizioni.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera