6XC

Generatore di Transform CSS

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

1.299 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.

Commenti

Ancora nessun commento — scrivi il primo!

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