Translate, rotate e scale
Sposti gli elementi con translate(), li ruoti con rotate() e ne ridimensioni le dimensioni con scale().
Translate, rotate e scale è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
La proprietà transform
transform applica trasformazioni visive 2D e 3D agli elementi: spostamento, rotazione, ridimensionamento e inclinazione. Le trasformazioni avvengono dopo il layout e non influenzano gli elementi circostanti.
translate()
Sposta un elemento dalla posizione corrente. Argomenti: spostamento x e y.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Funzioni per i singoli assi, per maggiore chiarezza:
<div class="slide-in active">Slide panel</div>rotate()
Ruota un elemento di un determinato angolo. I valori positivi ruotano in senso orario.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Ridimensiona un elemento in modo uniforme o lungo un asse. I valori inferiori a 1 lo riducono; quelli superiori a 1 lo ingrandiscono.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() e scaleY()
Ridimensionamento indipendente lungo un asse:
<div class="logo">LOGO</div>Combinazione delle trasformazioni
Più funzioni di trasformazione vengono applicate in ordine, da destra a sinistra. L'ordine influisce sul risultato.
<div class="card demo-active">Card</div>Origine della trasformazione
transform-origin imposta il punto di rotazione per le rotazioni e i ridimensionamenti. Il valore predefinito è il centro (50% 50%).
<div class="card demo-active">Card</div>Proprietà di trasformazione individuali
Il CSS moderno consente di impostare singole funzioni di trasformazione come proprietà separate:
<div class="card demo-active">Card</div>Transizioni con le trasformazioni
La trasformazione è una delle due proprietà composte dalla GPU. La animi sempre con una transizione per ottenere effetti fluidi e performanti:
<div class="card demo-active">Card</div>translate() rispetto a top/left
Per le animazioni, preferisca sempre transform: translate() a top/left. La trasformazione viene composta dalla GPU, mentre top/left attiva un ricalcolo del layout a ogni fotogramma.
Verifica rapida
Quale funzione di trasformazione riflette un elemento orizzontalmente, come quando si capovolge una scheda?
Riepilogo
transform sposta, ruota e ridimensiona gli elementi dopo il layout senza influire sul contenuto circostante. Utilizzi translate() per gli spostamenti, rotate() per le rotazioni e scale() per il ridimensionamento. Combini più funzioni in un'unica dichiarazione. Il CSS moderno supporta proprietà di trasformazione individuali. Animi sempre le trasformazioni con transizioni per ottenere prestazioni fluide grazie alla composizione della GPU.
Domande Frequenti
La lezione «Translate, rotate e scale» è gratuita?
Sì — il testo completo di «Translate, rotate e scale» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Translate, rotate e scale»?
Sposti gli elementi con translate(), li ruoti con rotate() e ne ridimensioni le dimensioni con scale(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Translate, rotate e scale»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Translate, rotate e scale
- Trasformazioni skew e matrix
- Origine e prospettiva delle trasformazioni
- Trasformazioni 3D: rotateX, rotateY, translateZ