Le trasformazioni nei CSS (Cascading Style Sheets) permettono di modificare la forma e la posizione degli elementi HTML.
Ci sono diverse modalità di applicare una trasformazione CSS:
1. translate(): Questa funzione sposta un elemento lungo gli assi X e Y. Ad esempio, `transform: translate(50px, 100px);` sposterà l’elemento di 50px verso destra e 100px verso il basso.
1. rotate(): Questa funzione ruota un elemento intorno al punto di origine. Ad esempio, `transform: rotate(20deg);` ruoterà l’elemento di 20 gradi in senso orario.
1. scale(): Questa funzione cambia le dimensioni di un elemento. Ad esempio, `transform: scale(2, 2);` raddoppierà le dimensioni dell’elemento.
1. skew(): Questa funzione distorce un elemento lungo gli assi X e Y. Ad esempio, `transform: skew(20deg, 20deg);` distorcerà l’elemento di 20 gradi lungo entrambi gli assi.
1. matrix(): Questa funzione è utilizzata per applicare una trasformazione 2D utilizzando una matrice di sei valori. È una funzione più avanzata e richiede una buona conoscenza della matematica.
Ecco un esempio di utilizzo:
```
.div {
width: 100px;
height: 100px;
background: red;
transition: transform 2s; /*questra riga fa si che la trasformazione avvenga durante 2 secondi*/
}
.div:hover {
transform: rotate(180deg);
}
```
In questo esempio, quando passi il mouse sopra il div, questo ruoterà di 180 gradi.
Ricorda che per ottenere la migliore compatibilità cross-browser, dovresti usare i prefissi del fornitore per le trasformazioni CSS, come `-webkit-transform`, `-moz-transform`, `-ms-transform`, e `-o-transform`.
