Trasformazioni 3D: rotateX, rotateY, translateZ
Ruoti e sposti gli elementi nello spazio tridimensionale usando le funzioni di trasformazione CSS 3D.
Trasformazioni 3D: rotateX, rotateY, translateZ è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Panoramica delle trasformazioni 3D
Le trasformazioni 3D del CSS estendono il sistema 2D a una terza dimensione usando l'asse Z. Attivi il 3D con una perspective sul genitore e transform-style: preserve-3d per gli elementi 3D annidati.
rotateX()
rotateX(angle) ruota un elemento attorno all'asse X orizzontale, come quando si capovolge una pagina verso l'osservatore o nella direzione opposta.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) ruota attorno all'asse Y verticale, come una porta attorno ai cardini.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) è identica alla funzione 2D rotate(): ruota nel piano dello schermo.
rotate3d()
rotate3d(x, y, z, angle) ruota attorno a un vettore di asse 3D personalizzato. I valori x, y e z definiscono la direzione dell'asse.
<div class="element">3D</div>translateZ()
translateZ() sposta un elemento verso l'osservatore o nella direzione opposta lungo l'asse Z. I valori positivi lo avvicinano; quelli negativi lo allontanano.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) sposta un elemento lungo tutti e tre gli assi contemporaneamente. L'uso di translateZ(0) forza la promozione a un livello GPU, una comune ottimizzazione delle prestazioni.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) ridimensiona in tre dimensioni. scaleZ() ridimensiona la profondità, utile per le facce di un cubo 3D.
Esempio di cubo 3D
Costruire un cubo usando trasformazioni 3D su sei facce:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Effetto 3D parallasse
L'uso di translateZ sugli elementi figli crea profondità in una scena 3D scorrevole, una parallasse CSS:
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Accelerazione hardware
Le trasformazioni 3D, anche quelle semplici come translateZ(0), forzano l'elemento su un proprio livello GPU. Questo evita il ridisegno durante l'animazione, ma utilizza memoria GPU. Le utilizzi intenzionalmente, non come soluzione universale.
Verifica rapida
Quale funzione di trasformazione sposta un elemento lungo l'asse Z, verso l'osservatore o nella direzione opposta?
Riepilogo
Le trasformazioni CSS 3D usano rotateX/Y/Z() per ruotare attorno a ciascun asse e translateZ() per gli spostamenti in profondità. Attivi il vero 3D con perspective sul genitore e transform-style: preserve-3d. Utilizzi backface-visibility: hidden per gli effetti di capovolgimento. Le trasformazioni 3D forzano la promozione a un livello GPU per animazioni fluide.
Domande Frequenti
La lezione «Trasformazioni 3D: rotateX, rotateY, translateZ» è gratuita?
Sì — il testo completo di «Trasformazioni 3D: rotateX, rotateY, translateZ» è 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 «Trasformazioni 3D: rotateX, rotateY, translateZ»?
Ruoti e sposti gli elementi nello spazio tridimensionale usando le funzioni di trasformazione CSS 3D. 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 4 di 4.
Quanto tempo richiede la lezione «Trasformazioni 3D: rotateX, rotateY, translateZ»?
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