Le trasformazioni 2D
Usando le trasformazioni è possibile traslare, ruotare, ridimensionare e applicare altri effetti dinamici su un oggetto. Vediamo subito un semplice esempio col nostro solito quadrato
width: 100px;
height: 100px;
background-color: #98d925;
border: 2px solid #009F16;
transition-property: transform;
transition-duration: 2s;
}
div:hover {
transform: rotate(20deg);
}
L'effetto prodotto è mostrato qui sotto:
Come si può osservare ora, quando si passa col mouse sul quadrato, esso viene ruotato di 20 gradi.
Qui invece abbiamo un esempio di trasformazione per traslazione:
width: 100px;
height: 100px;
background-color: #98d925;
border: 2px solid #009F16;
transition-property: transform;
transition-duration: 2s;
}
div:hover {
transform: translate(50px, 100px);
}
Ed ecco l'effetto prodotto:
In questo caso passando col mouse sul quadrato, questo si sposta di 50px a destra e di 100px verso il basso rispetto alla sua posizione iniziale.
E' anche possibile applicare più trasformazioni in sequenza, in questo modo:
Oltre a translate e rotate, le altre trasformazioni 2D sono:
- scale: cambia le dimensioni di un elemento;
- skew, skewX e skewY: permettono di deformare un elemento;
- matrix: combina tutti i metodi di trasformazione 2D insieme.
Per approfondire l'argomento, invitiamo il lettore a consultare la pagina di W3 School.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
