Generatore di trasformazioni
Crea e visualizza in anteprima visivamente le proprietà di trasformazione CSS.
CSS Transform è una potente proprietà CSS che consente di trasformare gli elementi web nello spazio 2D o 3D. Attraverso trasformazioni come translate, rotate, scale e skew, è possibile creare design web dinamici e interattivi. Crea facilmente gli effetti desiderati con l'anteprima in tempo reale.
transform: none;Funzioni di trasformazione
- • translate(x, y): translate(x, y): Sposta l'elemento di x, y
- • scale(x, y): scale(x, y): Scala l'elemento di x, y rapporto
- • rotate(angle): rotate(angle): Ruota l'elemento di angle
- • skew(x, y): skew(x, y): Inclinazione dell'elemento di x, y gradi
Consigli per l'uso
- • Più funzioni di trasformazione possono essere combinate con spazi
- • Cambia l'origine della trasformazione con transform-origin
- • Usa con transition per creare effetti di animazione
- • Usa la proprietà perspective per le trasformazioni 3D
🎯 Concetti di base di Transform
CSS Transform è una proprietà CSS che cambia la forma, la dimensione e la posizione degli elementi. Consente la trasformazione visiva degli elementi senza interrompere il normale flusso del documento.
Sintassi di base:
transform: function(value) function(value) ...;📐 Dettagli funzione di trasformazione
🔄 Trasla (Movimento)
- •
translate(x, y): translate(x, y): Sposta lungo gli assi X, Y - •
translateX(x): translateX(x): Sposta solo lungo l'asse X - •
translateY(y): translateY(y): Sposta solo lungo l'asse Y - •
translate3d(x, y, z): translate3d(x, y, z): Movimento 3D
transform: translate(50px, 100px);📏 Scala (Ridimensionamento)
- •
scale(x, y): scale(x, y): Scala gli assi X, Y - •
scaleX(x): scaleX(x): Scala solo l'asse X - •
scaleY(y): scaleY(y): Scala solo l'asse Y - • Maggiore di 1 ingrandisce, minore di 1 rimpicciolisce
transform: scale(1.5, 0.8);🔄 Ruota (Rotazione)
- •
rotate(angle): rotate(angle): Ruota attorno all'asse Z - •
rotateX(angle): rotateX(angle): Ruota attorno all'asse X - •
rotateY(angle): rotateY(angle): Ruota attorno all'asse Y - • Usa unità deg, rad, turn per gli angoli
transform: rotate(45deg);📐 Inclinazione (Deformazione)
- •
skew(x, y): skew(x, y): Inclinazione lungo gli assi X, Y - •
skewX(angle): skewX(angle): Inclinazione lungo l'asse X - •
skewY(angle): skewY(angle): Inclinazione lungo l'asse Y - • Trasforma in forma di parallelogramma
transform: skew(15deg, 5deg);🎨 Origine della trasformazione (Punto di trasformazione)
La proprietà transform-origin imposta il punto di origine della trasformazione. Il valore predefinito è il centro dell'elemento (50% 50%).
Utilizzo di parole chiave
transform-origin: top left;Utilizzo di percentuali
transform-origin: 25% 75%;Utilizzo di pixel
transform-origin: 10px 20px;⚡ Consigli per l'ottimizzazione delle prestazioni
✅ Raccomandazioni
- • Anima solo trasformazione e opacità
- • Usa la proprietà will-change
- • Usa l'accelerazione 3D (translateZ(0))
- • Crea livelli compositi per migliori prestazioni
❌ Cose da evitare
- • Animazione di larghezza, altezza
- • Animazione di posizioni left, top
- • Eccessivo annidamento di trasformazioni
- • Uso non necessario di will-change
Esempio di ottimizzazione delle prestazioni:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animazione e transizioni
Transform può essere utilizzato con CSS Transition e Animation per creare effetti fluidi.
Esempio di transizione
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Esempio di animazione keyframe
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Compatibilità browser
CSS Transform è supportato in tutti i browser moderni, ma potrebbero essere necessari prefissi del fornitore per i browser più vecchi.
Esempio di prefisso del fornitore:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Esempi di utilizzo nel mondo reale
Effetto hover della carta
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Spinner di caricamento
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Effetto di ingresso modale
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Effetto clic del pulsante
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Strumenti di debug e sviluppo
Strumenti per sviluppatori del browser
- • Modifica in tempo reale nel pannello Elementi
- • Controlla i valori finali nella scheda Calcolato
- • Analisi delle prestazioni con la scheda Prestazioni
- • Controlla la struttura del livello con la vista 3D
Proprietà CSS utili
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Consigli professionali
Consiglio sulle prestazioni
L'utilizzo di transform3d() o translateZ(0) per creare livelli compositi per l'accelerazione GPU può migliorare significativamente le prestazioni dell'animazione.
Consiglio sull'accessibilità
Usa la media query prefers-reduced-motion per fornire alternative agli utenti sensibili al movimento.
Consiglio di design
Impostare correttamente transform-origin può creare effetti di trasformazione più naturali.
Consiglio di sviluppo
L'utilizzo di variabili CSS per controllare dinamicamente i valori di trasformazione semplifica l'integrazione JavaScript.