Le trasformazioni css permettono di trasformare un elemento all’interno di uno spazio a due o a tre dimensioni. Possono essere utilizzate con le transizioni css e le animazioni css per ottenere degli interessanti effetti grafici. Sono ampiamente supportate dai browser moderni.

Le trasformazioni 2d e 3d sono state unificate dal W3C in una sola specifica CSS Transforms Module Level 1.

Usare le trasformazioni css 2d

Le trasformazioni css si realizzano con la proprietà transform che accetta una serie di funzioni di trasformazione oppure il valore none.

.box {
  transform: <funzione di trasformazione> ; /* ... oppure il valore none */
}

Si può utilizzare più funzioni di trasformazione nella stessa dichiarazione separandole con uno spazio.

.box{
  transform: translateX(250px) rotate(90deg); 
}

Alcuni browser richiedono l’uso di un prefisso.

.box {
  -webkit-transform: value; /* Chrome e Safari */
  -moz-transform: value; /* Mozilla */
  -ms-transform: value; /* Internet Explorer */
  -o-transform: value; /* Opera */
  transform: value; /* Tutti i browser che supportano le trasformazioni css */
}

La proprietà transform non modifica il box model dell’elemento a cui è applicata e non influisce sulla posizione degli elementi circostanti. Quando si applica la trasformazione si deve tener conto dello spazio necessario alla visualizzazione dell’elemento dopo la trasformazione regolando i margini o la posizione degli elementi adiacenti.

Le funzioni di trasformazione 2d

Rotazione

La funzione rotate() ruota l’elemento di un certo numero di gradi indicati come argomento.

.box {
  transform: rotate(30deg); /* In senso orario */
}
.box {
  transform: rotate(-30deg);/* In senso antiorario */
}

Valori positivi ruotano l’oggetto in senso orario mentre valori negativi ruotano l’oggetto in senso antiorario.

Le trasformazioni css: rotate()

Le trasformazioni css: rotate()

Scala

La funzione scale() modifica le dimensioni dell’oggetto secondo il valore passato come argomento.

.box{
  transform: scale(2); /* Raddoppia le dimensioni */
}

Valori maggiori di 1 aumentano le dimensioni dell’elemento, valori minori le riducono.

Le trasformazioni css: scale()

Le trasformazioni css: scale()

Se vengono indicati due valori il primo modifica la larghezza (la dimensione sull’asse X) e il secondo l’altezza (la dimensione sull’asse delle Y).

.box{
  transform: scale(2,4); 
  /* Le dimensioni dell'oggetto saranno
     raddoppiate in larghezza e aumentate di 4 volte in altezza 
  */
}

Per modificare esplicitamente solo l’altezza o la larghezza usare le funzioni scaleX() e scaleY().

.box{
  transform: scaleX(1.5);
}
.box{
  transform: scaleY(1.5);
}

Inclinazione

Gli elementi possono essere inclinati con le funzioni skew(), skewY() e skewX(). L’inclinazione è indicata in gradi.

.box{
  transform: skewX(20deg);
}
.box{
  transform: skewY(20deg);
}
Le trasformazioni css: skew()

Le trasformazioni css: skew()

Se si utilizza la funzione skew() il primo argomento indica l’inclinazione rispetto all’asse delle X mentre il secondo, se è presente, indica l’inclinazione  rispetto all’asse delle Y.

.box{
  transform: skew(20deg, 30deg);
  /* 
     20 gradi lungo l'asse delle X
     30 gradi lungo l'asse delle Y
  */
}

Traslazione

La funzione translate() sposta l’elemento in orizzontale (lungo l’asse delle X) della distanza indicata come argomento. La distanza dello spostamento può essere indicata in qualsiasi unità di misura valida in css.

.box{
  transform: translate(50px);
}

Se la funzione translate() è usata con due argomenti il secondo argomento indica lo spostamento verticale (lungo l’asse delle Y).

.box{
  transform: translate(50px, 100px);
}
Le trasformazioni css: translate()

Le trasformazioni css: translate()

Per indicare solo lo spostamento orizzontale oppure solo quello verticale usare le funzioni translateX() e translateY():

.box{
  transform: translateX(50px); 
}
.box{
  transform: translateY(50px); 
}

La proprietà transform-origin

Controlla il punto di origine della trasformazione e può essere espressa attraverso parole chiave, un valore percentuale o in altre unità di misura valide nei fogli di stile css. Quando la proprietà transform-origin non viene specificata il browser utilizza il valore predefinito che corrisponde al centro dell’elemento.

Le trasformazioni css: transform-origin

Le trasformazioni css: transform-origin

Nell’esempio seguente il centro della rotazione dell’elemento si trova nell’angolo inferiore destro.

.box {
  transform: rotate(30deg);
  transform-origin:right bottom;
}

Il supporto delle trasformazioni css da parte dei browser

Le trasformazioni sono supportate, almeno parzialmente, da tutti i browser moderni:

  • IE 9 (dalla versione 10 senza prefisso)
  • Firefox (31+)
  • Chrome (31+)
  • Safari (5+ con prefisso) e Safari per IOS (7.1 con prefisso)
  • Opera (25+)
  • Android browser (4.1 con prefisso)

Per informazioni aggiornate sul supporto da parte dei browser consultare il sito Caniuse.com alla pagina transizioni 2d.

Altre informazioni

Altre informazioni utili sono disponibili nelle seguenti risorse: