Generatore di transform CSS (ruota, sposta, scala, inclina e 3D)

Generatore di transform CSS (ruota, sposta, scala, inclina e 3D): a cosa serve

La proprietà transform sposta, ruota, scala e inclina gli elementi senza toccare il layout della pagina, ed è il modo più leggero di animare. Muovi i controlli per spostare, ruotare, scalare, inclinare e ruotare in 3D, scegli il punto di origine e la prospettiva e guarda la card cambiare subito.

Il codice esce nell’ordine in cui il browser applica le funzioni e, con l’opzione hover, include una transizione morbida limitata a chi usa il mouse e disattivata per chi ha chiesto meno animazioni. La pagina spiega perché l’ordine conta e perché animare transform è più leggero che animare top, left o width.

Come si usa

1. Muovi i controlli.
2. Scegli l’origine e, nel 3D, la prospettiva.
3. Copia il CSS.

Quando usarlo

• Effetti hover sulle card.
• Icone ruotate e specchiate.
• Card che si girano in 3D.

Domande frequenti

L’ordine delle funzioni nel transform conta?

Conta. translateX(100px) rotate(45deg) sposta e poi ruota sul posto; rotate(45deg) translateX(100px) ruota prima e poi avanza nella direzione già ruotata, finendo in un altro punto. Il generatore usa l’ordine sposta, ruota, scala e inclina, il più prevedibile.

Perché usare transform nelle animazioni?

Transform e opacity sono le proprietà più economiche da animare: non fanno ricalcolare il layout della pagina al browser e di solito girano sulla scheda video. Animare invece top, left, width o margin fa scattare l’animazione sugli smartphone meno potenti.

Cosa fa la prospettiva?

Nelle rotazioni 3D (rotateX e rotateY), la prospettiva definisce la distanza dell’osservatore: valori piccoli, come 300px, danno un effetto 3D forte e deformato; valori grandi, come 1500px, rendono la rotazione più morbida.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili