Metodi di trasformazione 3D in CSS

Al fine di assicurarsi che il tuo web design sia eccezionale e garantisce di migliorare l'esperienza dell'utente necessario per imparare a impostare vari elementi HTML sulla tua pagina web. Ci sono molte cose che puoi fare con gli elementi per migliorare il loro aspetto come tradurre, ruotare o scalare elementi nello spazio 2D o 3D.

CSS fornisce vari metodi di trasformazione che rientrano nella categoria del metodo di trasformazione 2D o dei metodi di trasformazione 3D. Tuttavia, in questo post vedremo i metodi di trasformazione 3D in CSS.

Metodi di trasformazione 3D in CSS

Esistono vari metodi di trasformazione 3D in CSS; Alcuni dei metodi di base sono i seguenti.

1. Metodo Translate3d ()
2. metodo rote3d ()
3. Metodo scale3d ()
4. Metodo Matrix3d ​​()

I metodi sopra menzionati sono spiegati in dettaglio di seguito.

Metodo Translate3d ()

Il metodo CSS Translate3d () modifica la posizione di un elemento lungo gli assi X, Y e Z in base ai parametri assegnati.

Sintassi

Transform: Translate3D (TX, TY, TZ)

I parametri TX, TY e TZ rappresentano gli assi X, Y e Z.

Esempio
Supponiamo di voler modificare la posizione di un'immagine nella dimensione 3D usando il metodo Translate3D () quindi seguire l'esempio seguente.

Html

Senza traduzione:

Con traduzione:

Nel codice sopra, abbiamo creato due elementi Div e inserito la stessa immagine in entrambi i contenitori per dimostrare l'effetto prima e dopo del metodo Translate3D ().

CSS

.div
larghezza: 200px;
Altezza: 100px;
Margine: 30px;

.tradurre
trasformazione: traduzione3d (30px, 30px, 50px);

Per prima cosa stiamo fornendo al contenitore Div un po 'di larghezza, altezza e margine. Successivamente stiamo usando il metodo Translate3D () per modificare la posizione del secondo contenitore di div.

Produzione

La posizione dell'immagine è stata modificata correttamente usando il metodo Translate3D ().

metodo rote3d ()

Ai fini della rotazione di un elemento in senso orario o in senso antiorario nello spazio 3D in base al grado specificato, viene utilizzato il metodo rotato ().

Sintassi

Trasformazione: rote3d (rx, ry, rz, gradi)

I parametri RX, RY e RZ definiscono le tre dimensioni, mentre il parametro gradi specifica l'angolo da cui l'elemento deve essere ruotato.

Esempio
Per dimostrare il funzionamento del metodo rote3d () useremo l'esempio utilizzato nella sezione sopra I.e. Ruoteremo l'immagine del cane lungo gli assi X, Y e Z.

CSS

.div
larghezza: 200px;
Altezza: 100px;
Margine: 30px;
Prospettiva: 300px;

.ruotare
trasformazione: rote3d (0, 1, 0, 45deg);

Oltre a impostare la larghezza, l'altezza e il margine dell'elemento Div, stiamo anche regolando la sua prospettiva. La proprietà prospettica definisce la vista prospettica di un elemento nella dimensione 3D. Infine, stiamo ruotando il secondo contenitore div specificando i valori degli assi X, Y e Z e l'angolo.

Produzione

L'immagine è stata ruotata correttamente nella dimensione 3D.

Metodo scale3d ()

Al fine di migliorare o ridurre la dimensione di un elemento in base alla larghezza e all'altezza specificate, viene utilizzato il metodo scala (). Affinché questo metodo funzioni, usalo insieme ad altri metodi di trasformazione come la rotazione e la prospettiva.

Sintassi

Trasformazione: Scale3D (SX, SY, SZ)

Gli assi X, Y e Z sono rappresentati dai parametri SX, SY e SZ.

Esempio
Vediamo cosa succede all'immagine del cane quando si utilizza il metodo Scale3d ().

CSS

.div
larghezza: 300px;
Altezza: 80px;
Margine: 30px;
Prospettiva: 300px;

.scala
trasformazione: scala3d (1, 1, 1) rote3d (1, 0, 0, 45deg);

Come già accennato, dobbiamo usare il metodo Scale3d () con altri metodi per vedere il suo effetto, quindi, nel codice sopra, lo stiamo usando insieme al metodo Rote3D ().

Produzione

L'immagine del cane è stata ridimensionata.

Metodo Matrix3d ​​()

Ai fini della traduzione, della rotazione e del ridimensionamento degli elementi contemporaneamente nello spazio 3D, viene utilizzato il metodo Matrix (). Questo metodo rende 16 valori sotto forma di una matrice 4 × 4.

Sintassi

Trasformazione: Matrix3D (m, m, m, m, m, m, m, m, m, m, m, m, m, m, m, m)

O,

Trasformazione: Matrix3D (traduzione3d (), rote3d (), scala3d ())

I valori di diversi metodi possono essere assegnati ai parametri corrispondenti.

Esempio
Traduciamo, ruotiamo e ridimensioniamo l'immagine del cane tutta in una volta usando il metodo Matrix3d ​​().

CSS

.matrice
Trasformazione: traduzione3d (10px, 10px, 20px) rote3d (0, 1, 0, -45deg) scale3d (1, 1, 1);

Stiamo muovendo, ruotando e ridimensioniamo l'immagine in una volta.

Produzione

Il metodo Matrix3d ​​() funziona correttamente.

Altri metodi di trasformazione 3D sono stati spiegati nella tabella seguente.

Metodo	Descrizione
Metodo TransLex (X)	Altera la posizione di un elemento lungo l'asse x.
Metodo Translatey (Y)	Altera la posizione di un elemento lungo l'asse y
Metodo Translatez (Z)	Altera la posizione di un elemento lungo l'asse z
Metodo rotatex (x)	Ruota un elemento lungo l'asse x.
Metodo rotatey (y)	Ruota un elemento attraverso l'asse y.
Metodo Rotatez (Z)	Ruota un elemento lungo l'asse z.
Metodo scalex (x)	Ridimensiona l'elemento attraverso l'asse x.
Metodo Scaley (Y)	Ridimensiona l'elemento attraverso l'asse y.
Metodo Scalez (Z)	Scalla un elemento lungo l'asse z.
Metodo prospettiva (n)	Definisce la vista prospettica di un elemento nello spazio 3D.

Conclusione

Per posizionare, ruotare e ridimensionare elementi lungo gli assi X, Y e Z, ci sono vari metodi di trasformazione 3D disponibili in CSS. I metodi di trasformazione 3D di base in CSS sono Translate3D (), Scale3d (), Rote3d () e Matrix3D (). Il metodo Translate3d () viene utilizzato per modificare la posizione di un elemento, il metodo rote3d () viene utilizzato per ruotare un elemento nella dimensione 3D, il metodo scale3d () viene utilizzato per modificare la dimensione di un elemento e Matrix3d ​​() Il metodo viene utilizzato per eseguire tutte queste attività contemporaneamente. Tutti questi metodi sono spiegati in modo approfondito insieme a esempi pertinenti in questa guida.