Metodi di trasformazione 2D in CSS

Quando si progetta un sito Web è spesso richiesto di posizionare, ruotare, scala o distorcere elementi HTML in orizzontale e verticalmente per migliorare la vista del sito Web. A tale scopo, possiamo usare la proprietà CSS Transform che ci consente di modificare la posizione, la forma di un elemento. In CSS, ci sono due tipi di trasformazioni che sono trasformazioni 2D e trasformata 3D.

In questa guida, tuttavia, ti attaccheremo alla trasformazione 2D e apprenderemo i vari metodi di trasformazione 2D.

Metodi di trasformazione 2D in CSS

Esistono vari metodi di trasformazione 2D in CSS che sono i seguenti.

1. Metodo Translate ()
2. Metodo rotato ()
3. Metodo scala ()
4. Metodo scalex ()
5. Metodo scaley ()
6. Metodo dell'innesto ()
7. Metodo skewx ()
8. metodo skewy ()
9. Metodo Matrix ()

Questi sono spiegati in dettaglio di seguito.

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)

O,

Transform: Translate (TX)

I TX e Ty si riferiscono agli assi X e Y.

Esempio
Supponiamo di voler spostare un'immagine su una determinata posizione usando il metodo Translate (), quindi seguire l'esempio di seguito.

Html

CSS

img
larghezza: 250px;
Altezza: 100px;
Transform: traduci (50px, 50px);

Produzione
Senza metodo Translate ().

Con il metodo Translate ().

Il metodo Translate () ha tradotto l'immagine 50px dalla parte superiore e 5-px dal lato sinistro correttamente.

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: ruotare (gradi)

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

Esempio
Considera l'esempio seguente per comprendere il funzionamento del metodo rote ().

Html

Questo è un normale contenitore di div.


Questo contenitore di div viene ruotato di 25 gradi in senso orario.


Questo contenitore di div viene ruotato di 25 gradi in senso antiorario.

Qui abbiamo specificato tre contenitori Div per dimostrare il concetto del metodo rotato ().

CSS

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

.senso orario
Trasformazione: ruotare (25DEG);

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

Nel codice sopra, stiamo prima dando un po 'di larghezza, altezza, colore di sfondo e bordo ai contenitori di div. Successivamente, stiamo ruotando il secondo Div 25 gradi in senso orario e il terzo Div 25 gradi in senso antiorario. Si noti che per ruotare in senso antiorario stiamo usando valori negativi.

Produzione

Il metodo rote () è stato implementato e verificato.

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)

O,

Transform: Scale (SX)

SX e SY rappresentano rispettivamente le dimensioni orizzontali e verticali.

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

Html

La dimensione del contenitore Div è aumentata due volte della sua larghezza originale e altezza.

Nel codice sopra, abbiamo semplicemente creato un elemento div.

CSS

div
larghezza: 200px;
Altezza: 100px;
Margine: 130px;
Background-color: bisque;
bordo: 1px nero solido;
trasformazione: scala (2,2);

Usando le proprietà CSS stiamo assegnando una certa larghezza, altezza e margine all'elemento Div e infine stiamo usando il metodo Scale () per aumentare la larghezza e l'altezza dell'elemento due volte la sua larghezza e altezza originali.

Produzione

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

Metodo scalex ()

Allo scopo di alterare la larghezza di un elemento, viene utilizzato il metodo scalex ().

Sintassi

Transform: Scalex (SX)

Il parametro SX rappresenta la dimensione orizzontale di un elemento.

Esempio
Supponiamo che tu voglia ridurre la larghezza di un elemento, quindi consultare l'esempio di seguito.

CSS

div
trasformazione: scalex (0.5);

Nel codice sopra, stiamo usando il metodo Scalex () per ridurre la larghezza di un contenitore div.

Produzione

Il metodo scalex () funziona correttamente.

Metodo scaley ()

Allo scopo di alterare l'altezza di un elemento, viene utilizzato il metodo scaley ().

Sintassi

Transform: Scaley (SY)

Il parametro SY definisce il valore dell'asse y.

Esempio

Considera l'esempio di seguito.

CSS

div
Trasformazione: Scaley (2);

Qui stiamo usando il metodo Scaley () per aumentare l'altezza dell'elemento Div.

Produzione

L'altezza dell'elemento Div è stata aumentata due volte la sua altezza originale.

Metodo dell'innesto ()

Questo metodo distorce un elemento in orizzontale e verticalmente basato sui gradi specificati.

Sintassi

Transform: Skew (SX, SY)

O,

Trasformazione: inclinazione (SX)

SX e SY rappresentano gli assi X e Y.

Esempio
Supponiamo di voler distorcere un elemento lungo le assi X e Y ..

Html

Questo è un normale contenitore di div.


Questo contenitore di div è distorto di 10 gradi in orizzontale e 15 gradi in verticale.

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

CSS

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

.storto
Trasformazione: inclinazione (10deg, 15deg);

Oltre allo styling dei contenitori Div stiamo inclinando il secondo contenitore Div 10 gradi lungo l'asse X e 15 gradi lungo l'asse Y.

Produzione

Il contenitore Div è stato distorto in orizzontale e verticalmente.

Metodo skewx ()

Al fine di distorcere un particolare elemento in orizzontale in base ai gradi specificati, viene utilizzato il metodo Skewx ().

Sintassi

Trasformazione: inclinazione (SX)

Il parametro SX definisce l'asse x.

Esempio
Supponiamo di voler distorcere un elemento di 15 gradi in orizzontale.

CSS

.storto
Trasformazione: skewx (15deg);

Usando il metodo skewx () stiamo inclinando l'elemento div 15 gradi in orizzontale.

Produzione

Il metodo scalex () funziona correttamente.

metodo skewy ()

Al fine di distorcere un particolare elemento in verticale in base ai gradi specificati, viene utilizzato il metodo Skewy ().

Sintassi

Trasformazione: inclinazione (sy)

Il parametro SY definisce l'asse y.

Esempio
Supponiamo di voler distorcere un elemento di 15 gradi in verticale.

CSS

.storto
Trasformazione: Skewy (15Deg);

Usando il metodo skewx () stiamo inclinando l'elemento div 15 gradi in verticale.

Produzione

Il metodo Scaley () funziona correttamente.

Metodo Matrix ()

Ai fini della traduzione, della rotazione, del ridimensionamento e degli elementi di distinguere tutti in una volta, viene utilizzato il metodo Matrix ().

Sintassi

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

È possibile assegnare valori a tutte le proprietà che li separano le virgole.

Esempio

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

Html

Questo è un normale contenitore di div.


Il contenitore Div dopo aver utilizzato il metodo Matrix ().


Il contenitore Div dopo aver utilizzato il metodo Matrix ().

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

CSS

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

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

.Matrix2
Trasformazione: Matrix (1, 0, 0.5, 1, 150, 0);

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

Produzione

Il metodo Matrix funziona correttamente.

Conclusione

Ai fini del posizionamento, della rotazione, del ridimensionamento o degli elementi dell'albero lungo l'asse X e Y, ci sono vari metodi di trasformazione 2D disponibili in CSS. I metodi di trasformazione 2D di base in CSS sono traduci (), rota (), scala (), disfongo () e matrix (). Ognuno di questi metodi ha uno scopo diverso che abbiamo spiegato in questo articolo insieme all'esempio rilevante.