CSS transform: rotate, scale, translate, skew, flip 3D | We.Inc
Muovi gli slider di rotate, scale, translate e skew e copia il CSS e le classi Tailwind. Copre l'ordine delle trasformazioni, transform-origin, il flip 3D delle card e le animazioni fluide.
Sposta, ruota, ridimensiona o inclina un elemento con la proprietà transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Le funzioni si applicano da destra a sinistra, quindi il loro ordine cambia il risultato. Le trasformazioni non spostano mai il layout circostante, e animarle costa poco perché il browser può affidare il lavoro al compositor.
Le quattro funzioni di trasformazione 2D
Funzione
Esempio
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Usa gli slider per costruire una trasformazione e guarda la card reagire, poi passa dalla singola proprietà transform alle proprietà separate translate, rotate e scale. Più in basso trovi la demo dell'origine, un flip 3D da provare al passaggio del mouse, ricette di transizione e una nota sul perché le trasformazioni restano fluide mentre top e left scattano.
Trascina gli slider di translate, rotate, scale e skew. La card si muove e il CSS si riscrive da solo.
Scegli un transform-origin per vedere quale punto resta fisso mentre la card ruota o cresce.
Passa dalla scorciatoia transform combinata alle proprietà individuali e viceversa.
Copia il CSS o le classi Tailwind e incollali nel tuo foglio di stile o nel markup.
Centra un box posizionato in modo assoluto con top: 50%; left: 50%; translate: -50% -50%. Le percentuali in translate si riferiscono all'elemento stesso, non al genitore.
Anima transform e opacity invece di width, height, top o left. Quelle altre proprietà impongono lavoro di layout a ogni frame.
Le rotazioni oltre i 360deg sono consentite e contano nelle animazioni: rotate(720deg) fa due giri quando parte da 0 con una transizione.
Aggiungi will-change: transform solo agli elementi che stanno per animarsi, poi rimuovilo. Lasciarlo ovunque consuma memoria.
Domande frequenti
Perché l'ordine delle funzioni di trasformazione è importante?
Ogni funzione cambia il sistema di coordinate per quelle scritte prima di lei, quindi la lista viene di fatto applicata da destra a sinistra. translate(100px) rotate(45deg) ruota il box e poi lo fa scorrere dritto verso destra, mentre rotate(45deg) translate(100px) lo fa scorrere lungo l'asse ruotato, in diagonale.
Qual è la differenza tra transform: rotate() e la proprietà rotate?
Le proprietà rotate, scale e translate sono versioni autonome delle stesse funzioni. Si possono impostare e animare separatamente, quindi uno scale all'hover non cancella una rotazione impostata altrove. Il browser applica prima translate, poi rotate, poi scale e infine ciò che c'è in transform.
transform influisce sul layout o sugli altri elementi?
No. L'elemento mantiene il suo box originale nel layout e i vicini non si spostano. Cambia solo la sua immagine disegnata. Un elemento trasformato però crea un nuovo stacking context e diventa il containing block dei discendenti con position fixed, il che può sorprenderti con i modali.
Come capovolgo un elemento in orizzontale?
Usa transform: scaleX(-1) o la proprietà scale con scale: -1 1. Riflette l'elemento attorno alla sua origine, che per impostazione predefinita è il centro. Per un flip 3D che mostra il retro, ruota attorno all'asse Y dentro un genitore con perspective.
Perché il mio testo trasformato è sfocato?
Le traslazioni frazionarie e alcuni valori di scale collocano i glifi tra un pixel e l'altro, il che li ammorbidisce, soprattutto durante un'animazione. Arrotondare i valori di translate a pixel interi e scalare verso la dimensione finale invece di ingrandire da una più piccola di solito rende il risultato più nitido.
Leggere una lista di trasformazioni
Un modello mentale utile: parti dall'ultima funzione e risali fino alla prima, ogni volta spostando, ruotando o allungando l'elemento nel suo riferimento attuale, già modificato. Se un risultato sembra sbagliato, invertire la lista spesso risolve.
Le percentuali dentro translate() misurano il border box dell'elemento stesso. Ecco perché translate(-50%, -50%) centra un box di cui non conosci in anticipo le dimensioni.
Perché le trasformazioni si animano in modo fluido
I browser renderizzano una pagina per fasi: stile, layout, paint e composite. Cambiare top o width rifà il layout dell'elemento e spesso dei suoi vicini. Cambiare transform o opacity di solito permette di saltare direttamente al compositing, dove un livello già disegnato viene spostato dal processore grafico.
È il motivo per cui le linee guida sul movimento continuano a indicare queste due proprietà. Se un'animazione perde frame, apri il pannello delle prestazioni del browser e cerca lavoro di layout e paint dentro ogni frame.
Il 3D in un paragrafo
Dai al genitore una perspective, per esempio 800px, così i figli ruotati su X o Y sembrano allontanarsi. Numeri più piccoli esagerano la profondità. transform-style: preserve-3d permette ai figli annidati di condividere quello spazio 3D, e backface-visibility: hidden nasconde una faccia quando si gira dall'altra parte, che è il cuore di ogni flip delle card.
Tutte le funzioni di trasformazione
Funzioni di trasformazione 2D e 3D con le relative utility Tailwind
Funzione
Cosa fa
Tailwind (v3 e v4 salvo indicazione)
translate(x, y)
Sposta lungo X e Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Sposta su un solo asse
translate-x-1/2, translate-y-full
translateZ(z)
Avvicina o allontana dall'osservatore (richiede perspective)
translate-z-4 (v4)
rotate(a)
Ruota in senso orario di un angolo (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Inclina attorno all'asse orizzontale o verticale in 3D
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Ingrandisce o rimpicciolisce; i valori negativi riflettono
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Inclina l'elemento
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Tutte le trasformazioni 2D in una matrice
valore arbitrario: [transform:matrix(...)]
perspective(d)
Profondità solo per questo elemento
perspective-[800px] sul genitore (v4)
Ordine delle operazioni
Le stesse due funzioni in ordine diverso mettono il box in un punto diverso. Entrambi i box blu partono dallo stesso punto.
Prima translate poi rotate, contro prima rotate poi translate
Nel primo box lo scorrimento avviene lungo l'asse X dello schermo. Nel secondo lo scorrimento segue l'asse ruotato, quindi il box finisce più in basso.
Le proprietà individuali non si sovrascrivono a vicenda
La regola hover tocca solo scale, quindi il rotate impostato nella regola base resta. Con la scorciatoia transform dovresti ripetere rotate(-3deg) dentro :hover.
Stessa rotazione, tre origini
L'origine è il punto che resta fermo. center è il valore predefinito; top left fa girare il box come una porta incernierata nell'angolo.
Flip 3D di una card
Passa sopra con il mouse o metti a fuoco per girarla (solo CSS)
perspective sul contenitore dà profondità, preserve-3d mantiene entrambe le facce nello stesso spazio 3D e backface-visibility nasconde la faccia rivolta dall'altra parte. Chi preferisce meno movimento vede uno scambio istantaneo.
Combinare trasformazioni e transizioni
Sollevamento all'hover per card e pulsanti
Cambiano solo transform e box-shadow, e il movimento viene disattivato per chi chiede meno animazioni.
La stessa idea in Tailwind
motion-safe: applica il movimento all'hover solo quando chi legge non ha richiesto il movimento ridotto.
Cosa costa poco animare
Lavoro di rendering causato dal cambio di una proprietà (comportamento tipico dei browser)
Proprietà
Layout
Paint
Solo composite
transform, translate, rotate, scale
No
No (di solito)
Sì
No
No (di solito)
Sì
background-color, color, box-shadow
No
Sì
No
width, height, top, left, margin
Sì
Sì
No
(nessuna trasformazione)
Playground delle trasformazioni
Stile dell'output
scorciatoia transform
proprietà individuali
Ripristina
Card
Contorno tratteggiato: dove si trova la card nel layout. Punto scuro: il transform-origin.