Trasformazioni
Possiamo trasformare l’aspetto degli elementi tramite la proprietà trasform, i metodi sono:
- translate() – permette di spostare un elemento sull’asse X e Y, esiste anche nelle versioni translateX e translateY;
- rotate() – ruota un elemento in senso orario (parametro positivo)o antiorario (parametro negativo), valore in gradi o radianti;
- scale() – possiamo ridimensionare l’elemento nell’asse X e Y, valori inferiori a 1 producono una riduzione mentre superiori a 1 un ingrandimento;
- skew() – permette di sia sull’asse X che Y con angoli diversi, valori espressi in gradi;
- matrix() – effettua una trasformazione in forma di matrice, i primi quattro valori rappresentano la matrice e gli ultimi due lo spostamento;
L’origine dell’elemento si trova al centro ma possiamo cambiarlo tramite trasform.origin che richiede lo spostamento nei due assi X e Y (l’angolo in alto a sinistra è 0, 0). Oppure possiamo usare i seguenti valori:
- asse X – left, center, right;
- asse Y – top, center, bottom;
Per avere un effetto rotazione 3d, oltre ai metodi rotateX, rotateY e rotateZ, dobbiamo applicare la proprietà perspective per avere un effetto tridimensionale.