Origine e prospettiva delle trasformazioni
Modifichi il punto di rotazione delle trasformazioni con transform-origin e aggiunga profondità con perspective.
Origine e prospettiva delle trasformazioni è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Valore predefinito di transform-origin
Per impostazione predefinita, le trasformazioni avvengono attorno al punto centrale dell'elemento: 50% 50%. La proprietà transform-origin modifica questo punto di rotazione.
Impostare transform-origin
Accetta parole chiave, percentuali o lunghezze. Formato: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin con scale
Ridimensionamento dall'angolo in alto a sinistra, utile per le animazioni di espansione dei menu a discesa:
<div class="dropdown open">Dropdown menu</div>transform-origin con la rotazione
Ruotare una lancetta dell'orologio attorno alla sua base:
<div class="clock"><div class="hand"></div></div>Proprietà perspective
perspective imposta la distanza tra l'utente e il piano z=0 per le trasformazioni 3D. Valori più piccoli creano una distorsione prospettica più marcata; valori più grandi creano una profondità più discreta.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Modifica il punto di fuga della prospettiva. Il valore predefinito è il centro (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective come funzione
perspective() può essere usata anche come funzione di trasformazione sull'elemento stesso, non sul genitore. In questo modo il contesto 3D viene limitato al solo elemento.
<div class="card">Card</div>transform-style: preserve-3d
Per impostazione predefinita, le trasformazioni 3D dei figli vengono appiattite in 2D. Imposti transform-style: preserve-3d sul genitore per mantenere il posizionamento 3D reale dei figli.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Effetto di capovolgimento di una scheda
La classica scheda con effetto di capovolgimento, usando perspective e preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden nasconde il lato posteriore di un elemento trasformato in 3D. È essenziale per le schede con effetto di capovolgimento, quando il retro non deve essere visibile attraverso il fronte.
Combinare perspective e origin
Un effetto 3D di inclinazione al passaggio del cursore, che reagisce alla posizione del cursore:
<div class="card demo-active">3D Tilt Card</div>Verifica rapida
Un menu a discesa usa transform: scaleY(0) per nascondersi e scaleY(1) per mostrarsi. Quale transform-origin lo fa espandere verso il basso a partire dall'alto?
Riepilogo
transform-origin modifica il punto di rotazione per le rotazioni e i ridimensionamenti: è fondamentale per l'espansione dei menu a discesa, le lancette degli orologi e le inclinazioni al passaggio del cursore. perspective sul genitore crea il contesto di profondità 3D. transform-style: preserve-3d abilita gli elementi 3D annidati. backface-visibility: hidden nasconde il retro degli elementi negli effetti di capovolgimento.
Domande Frequenti
La lezione «Origine e prospettiva delle trasformazioni» è gratuita?
Sì — il testo completo di «Origine e prospettiva delle trasformazioni» è 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 «Origine e prospettiva delle trasformazioni»?
Modifichi il punto di rotazione delle trasformazioni con transform-origin e aggiunga profondità con perspective. 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 3 di 4.
Quanto tempo richiede la lezione «Origine e prospettiva delle trasformazioni»?
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