Come spostare, ruotare, scala e distorcere elementi in CSS?

I web designer spesso desiderano fare alcune cose interessanti con gli elementi che appaiono sul loro sito Web per rendere il loro Web design accattivante. La proprietà CSS Transform ti consente di muovere, ruotare, scala e distorcere elementi lungo gli assi X e Y o lungo gli assi X, Y e Z. Questa proprietà è costituita da alcuni metodi che ti consentono di svolgere facilmente questi compiti. Questi metodi sono ampiamente classificati in due gruppi che sono i seguenti.

1. Metodi di trasformazione 2D
2. Metodi di trasformazione 3D

Impariamoli in dettaglio.

Metodi di trasformazione 2D

Per spostare, ruotare, scalare e distorcere elementi lungo l'asse X e l'asse Y, CSS fornisce vari metodi che rientrano nella categoria dei metodi di trasformazione 2D. Qui abbiamo elencato alcuni metodi di trasformazione 2D di base per te.

1. Metodo Translate ()
2. Metodo rotato ()
3. Metodo scala ()
4. Metodo dell'innesto ()
5. Metodo Matrix ()

Di seguito abbiamo spiegato in dettaglio questi metodi.

Metodo Translate ()

Il metodo CSS Translate () altera la posizione di un elemento lungo l'asse x (orizzontale) o lungo l'asse y (verticalmente) in base ai parametri assegnati.

Sintassi

Transform: Translate (TX, TY)

I parametri TX e TY rappresentano gli assi X e Y.

Esempio
Supponiamo di voler spostare un'immagine in una determinata posizione usando il metodo Translate (). Ecco il codice pertinente.

Html

Senza traduzione:

Con traduzione:

Qui abbiamo creato due elementi Div e messo un'immagine in entrambi.

CSS

.div
larghezza: 50px;
Margine: 20px;

.tradurre
Transform: traduci (30px, 30px);

Oltre a dare un po 'di larghezza e margine agli elementi Div, stiamo applicando il metodo Translate () sulla seconda immagine.

Produzione

L'immagine è stata spostata correttamente usando il metodo Translate ().

Metodo rotato ()

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

Sintassi

Trasformazione: rotazione (rx, ry, gradi)

Il parametro gradi definisce l'angolo da cui l'elemento deve essere ruotato.

Esempio
Supponiamo di voler ruotare un contenitore div sia in senso orario che in senso antiorario. Utilizzare il metodo rote ().

Html

Contenitore di div normale.


Ruotato di 30 gradi in senso orario.

R
Ruotato di 30 gradi in senso antiorario.

Per dimostrare il funzionamento del metodo rotato () tre contenitori di div.

CSS

div
larghezza: 250px;
Altezza: 100px;
Background-color: Rosybrown;
bordo: 1px grigio solido;

.senso orario
Trasformazione: ruotare (30DEG);

.in senso antiorario
trasformazione: rotare (-30deg);

Nel codice sopra, stiamo ruotando il secondo div 30 gradi in senso orario e il terzo Div 30 gradi in senso antiorario. I valori negativi vengono utilizzati per ruotare un elemento in senso antiorario.

Produzione

Il metodo rotato funziona correttamente.

Metodo scala ()

Al fine di migliorare o ridurre la dimensione di un elemento in base alla larghezza specificata e altezza viene utilizzato il metodo scala ().

Sintassi

Transform: Scale (SX, SY)

Gli assi X e Y sono definiti dal parametro SX e SY.

Esempio
L'esempio seguente dimostra il metodo funzionante del metodo scale ().

Html

Dimensione originale del contenitore Div
La dimensione del contenitore Div è aumentata una volta e mezzo della sua larghezza originale e altezza.

Abbiamo semplicemente creato due elementi Div.

CSS

div
larghezza: 200px;
Altezza: 100px;
Margine: 50px;
Background-color: Rosybrown;
bordo: 1px nero solido;

.scala
trasformazione: scala (1.5,1.5);

Stiamo usando il metodo scala () per aumentare la larghezza e l'altezza dell'elemento una volta e mezzo la sua larghezza e altezza originali.

Produzione

La dimensione del contenitore Div è stata ridimensionata usando il metodo Scale ().

Metodo dell'innesto ()

Il metodo Skew () inclina un elemento in orizzontale (lungo l'asse x) e verticalmente (lungo l'asse y) in base ai gradi specificati.

Sintassi

Transform: Skew (SX, SY)

O,

Trasformazione: inclinazione (SX)

Le due dimensioni sono rappresentate dai parametri SX e SY.

Esempio
Supponiamo di voler distorcere un elemento sia orizzontalmente che verticalmente, quindi considera l'esempio seguente.

Html

Container di div originale.


Questo contenitore di div è distorto di 8 gradi in orizzontale e 9 gradi in verticale.

Qui abbiamo definito due contenitori Div per dimostrare il concetto del metodo Skew ().

CSS

div
larghezza: 200px;
Altezza: 100px;
Background-color: Rosybrown;
bordo: 1px grigio solido;

.storto
Trasformazione: inclinazione (8DEG, 9DEG);

Stiamo inclinando il secondo contenitore div 8 gradi lungo l'asse X e 9 gradi lungo l'asse Y.

Produzione

L'elemento è stato distorto con successo.

Metodo Matrix ()

Al fine di tradurre, ruotare, scala e distorcere gli elementi tutti in una volta, viene utilizzato il metodo Matrix ().

Sintassi

Trasformazione: matrix (scalex (), skewy (), skewx (), scaley (), traduzionex (), traduzione ())

I valori dei rispettivi metodi possono essere assegnati come parametri.

Esempio
Comprendiamo il metodo funzionante del metodo Matrix () usando il seguente esempio.

Html

Container di div originale.


Dopo aver usato il primo metodo Matrix ().


Dopo aver usato il secondo metodo Matrix ().

Per dimostrare il funzionamento del metodo Matrix () abbiamo creato tre elementi Div.

CSS

div
larghezza: 200px;
Altezza: 100px;
Background-color: Rosbrown;
bordo: 1px grigio solido;

.Matrix1
Trasformazione: Matrix (1, -0.4, 0, 1, 0, 0);

.Matrix2
Trasformazione: Matrix (1, 0, 0.4, 1, 120, 0);

Stiamo assegnando valori diversi a vari parametri del metodo Matrix ().

Produzione

Il metodo Matrix () funziona correttamente.

Ora che abbiamo appreso i metodi di trasformazione 2D esploriamo i metodi di trasformazione 3D.

Metodi di trasformazione 3D

Per muoversi, ruotare e scalare e distorcere elementi lungo l'asse X, l'asse Y e l'asse z, CSS fornisce vari metodi che vengono indicati come metodi di trasformazione 3D. I metodi di trasformazione 3D fondamentali sono i seguenti

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

Abbiamo spiegato questi metodi in dettaglio di seguito.

Metodo Translate3d ()

Il metodo utilizzato per modificare la posizione di un elemento lungo gli assi X, Y e Z in base ai parametri assegnati è indicato come metodo Translate3D ().

Sintassi

Transform: Translate3D (TX, TY, TZ)

Le tre dimensioni sono rappresentate dai parametri TX, TY e TZ.

Esempio
Supponiamo di voler cambiare la posizione di un'immagine lungo tutti e tre. Usa il metodo Translate3D ().

Html

Senza traduzione:

Con traduzione:

La stessa immagine è stata inserita in entrambi i contenitori per dimostrare l'effetto prima e dopo del metodo Translate3D ().

CSS

.div
larghezza: 50px;
Margine: 20px;

.tradurre
trasformazione: traduzione3d (25px, 25px, 40px);

Stiamo usando il metodo Translate3d () per modificare la posizione del secondo contenitore.

Produzione

L'immagine è stata tradotta usando il metodo Translate3D ().

metodo rote3d ()

Allo scopo di ruotare un elemento in senso orario o in senso antiorario lungo gli assi X, Y e Z in base al grado specificato, viene utilizzato il metodo Ruotato ().

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
Supponiamo di voler ruotare un'immagine nello spazio 3D.

CSS

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

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

Stiamo ruotando il secondo contenitore di div specificando i valori degli assi x, y e z e l'angolo. Si noti che abbiamo anche impostato la proprietà prospettica su 300px, che definisce la vista prospettica di un elemento.

Produzione

L'immagine è stata ruotata con successo.

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 usarlo insieme ad altri metodi di trasformazione come la rotazione e la prospettiva.

Sintassi

Trasformazione: Scale3D (SX, SY, SZ)

I parametri sopra specificano le tre dimensioni.

Esempio
Vediamo cosa succede alla stessa immagine usata nell'esempio sopra quando si utilizza il metodo scale3d ().

CSS

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

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

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

Il metodo scale3d () è verificato e funzionante correttamente.

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 ())

Ogni parametro assume il valore del rispettivo metodo.

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, -60deg) scale3d (1, 1, 1);

L'immagine viene tradotta, ruotata e ridimensionata contemporaneamente.

Produzione

L'immagine è stata spostata, ruotata e ridimensionata in una volta.

Conclusione

Ai fini del movimento, della rotazione, del ridimensionamento e dell'incendio di un elemento, ci sono vari metodi disponibili in CSS che rientrano nelle categorie di metodi di trasformazione 2D e metodi di trasformazione 3D. I metodi Translate (), Rote (), Scale (), Skew () e Matrix () sono raggruppati sotto i metodi di trasformazione della classificazione 2D, nel frattempo, Metodi Translate3d (), Rote3d (), Scale3d () e Matrix3D () giacciono nel gruppo di metodi di trasformazione 3D. Tutti questi metodi sono spiegati in dettaglio in questa guida insieme a esempi pertinenti.