Le trasformazioni CSS ti consentono di spostare, ruotare, ridimensionare e inclinare gli elementi.

In questo articolo impareremo a conoscere la seguente proprietà CSS:

• transform

Metodi di trasformazione 2D CSS

Con la proprietà di trasformazione CSS puoi utilizzare i seguenti metodi di trasformazione 2D:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

Il metodo Translate()

Il metodo translate() sposta un elemento dalla sua posizione corrente (secondo i parametri forniti per l'asse X e l'asse Y).

L'esempio seguente sposta l'elemento <div> di 50 pixel a destra e di 100 pixel verso il basso rispetto alla posizione corrente:

div {
  transform: translate(50px, 100px);
}

Visualizza esempio

Il metodo rotazione()

Il metodo rotate() ruota un elemento in senso orario o antiorario in base ad un dato grado.

L'esempio seguente ruota l'elemento <div> in senso orario di 20 gradi:

div {
  transform: rotate(20deg);
}

Visualizza esempio

L'utilizzo di valori negativi ruoterà l'elemento in senso antiorario.

L'esempio seguente ruota l'elemento <div> in senso antiorario di 20 gradi:

div {
  transform: rotate(-20deg);
}

Visualizza esempio

Il metodo scale()

Il metodo scale() aumenta o diminuisce la dimensione di un elemento (secondo i parametri forniti per larghezza e altezza).

L'esempio seguente aumenta l'elemento <div> fino a due volte la sua larghezza originale e tre volte la sua altezza originale:

div {
  transform: scale(2, 3);
}

Visualizza esempio

L'esempio seguente riduce l'elemento <div> alla metà della sua larghezza e altezza originali:

div {
  transform: scale(0.5, 0.5);
}

Visualizza esempio

Il metodo scaleX()

Il metodo scaleX() aumenta o diminuisce la larghezza di un elemento.

L'esempio seguente aumenta l'elemento <div> fino a due volte la sua larghezza originale:

div {
  transform: scaleX(2);
}

Visualizza esempio

L'esempio seguente riduce l'elemento <div> alla metà della sua larghezza originale:

div {
  transform: scaleX(0.5);
}

Il metodo scaleY()

Il metodo scaleY() aumenta o diminuisce l'altezza di un elemento.

L'esempio seguente aumenta l'elemento <div> fino a tre volte la sua altezza originale:

div {
  transform: scaleY(3);
}

Visualizza esempio

L'esempio seguente riduce l'elemento <div> alla metà della sua altezza originale:

div {
  transform: scaleY(0.5);
}

Visualizza esempio

Il metodo skewX()

Il metodo skewX() inclina un elemento lungo l'asse X dell'angolo specificato.

L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X:

div {
  transform: skewX(20deg);
}

Visualizza esempio

Il metodo skewY()

Il metodo skewY() inclina un elemento lungo l'asse Y dell'angolo specificato.

L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse Y:

div {
  transform: skewY(20deg);
}

Visualizza esempio

Il metodo skew()

Il metodo skew() inclina un elemento lungo gli assi X e Y degli angoli specificati.

L'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X e di 10 gradi lungo l'asse Y:

div {
  transform: skew(20deg, 10deg);
}

Visualizza esempio

Se il secondo parametro non è specificato, ha valore zero. Pertanto, l'esempio seguente inclina l'elemento <div> di 20 gradi lungo l'asse X:

div {
  transform: skew(20deg);
}

Visualizza esempio

Il metodo matrix()

Il metodo matrix() combina tutti i metodi di trasformazione 2D in uno solo.

Il metodo matrice() accetta sei parametri, contenenti funzioni matematiche, che consentono di ruotare, ridimensionare, spostare (traslare) e inclinare gli elementi.

I parametri sono i seguenti: Matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Visualizza esempio

Proprietà di trasformazione CSS

Metodi di trasformazione 2D CSS