Transform in CSS

Trasformazioni 2D

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

Metodi delle Trasformazioni 2D

Con la proprietà di trasformazione CSS è possibile 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 attuale (in base ai parametri dati per l’asse X e l’asse Y).

L’esempio seguente sposta l’elemento <div> di 50 pixel verso destra e di 100 pixel verso il basso dalla sua posizione attuale:

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

Il Metodo rotate()

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

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

div {
  transform: rotate(20deg);
}

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);
}

Il Metodo scale()

Il metodo scale() aumenta o diminuisce le dimensioni di un elemento (in base ai parametri dati per la larghezza e l’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);
}

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

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

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);
}

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);
}

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

div {
  transform: scaleY(0.5);
}

Il Metodo skewX()

Il metodo skewX() inclina un elemento lungo l’asse X secondo l’angolo dato.

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

div {
  transform: skewX(20deg);
}

Il Metodo skewY()

Il metodo skewY() inclina un elemento lungo l’asse Y secondo l’angolo dato.

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

div {
  transform: skewY(20deg);
}

Il Metodo skew()

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

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);
}

Se il secondo parametro non è specificato, avrà un valore zero. Quindi, l’esempio seguente inclina l’elemento <div> di 20 gradi lungo l’asse X:

div {
  transform: skew(20deg);
}

Il Metodo matrix()

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

Il metodo matrix() prende sei parametri, che contengono funzioni matematiche, che ti permettono di ruotare, scalare, 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);
}

Trasformazioni 3D

Metodi delle Trasformazioni 3D

Con la proprietà di trasformazione CSS è possibile utilizzare i seguenti metodi di trasformazione 3D:

• rotateX()
• rotateY()
• rotateZ()

Il Metodo rotateX()

Il metodo rotateX() ruota un elemento intorno al suo asse X secondo un dato grado:

#myDiv {
  transform: rotateX(150deg);
}

Il Metodo rotateY()

Il metodo rotateY() ruota un elemento intorno al suo asse Y secondo un dato grado:

#myDiv {
  transform: rotateY(150deg);
}

Il Metodo rotateZ()

Il metodo rotateZ() ruota un elemento intorno al suo asse Z secondo un dato grado:

#myDiv {
  transform: rotateZ(90deg);
}