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.