Esistono diversi tipi di trasformazione 2D in CSS:
Rotate (angolo): permette di applicare una rotazione in base all’angolo;
Scale (x,y), scaleX (x) e scaleY (y) : permette di scalare;
Skew (angolox,angoloy), skew X(angolox) e skewY(angoloy): con cui inseriamo un’inclinazione;
Traslate (x,y), traslateX(x) e traslateY(y): applichiamo una straslazione;
Matrix (a,b,c,d,x,y): inseriamo una matrice di trasformazione.
Adesso vediamo la sintassi della proprieta’ transform 2D:
transform: rotate (70deg); transform: rotate (60deg) skewX (60deg) traslate (90px);
Come impostazione predefinita la proprieta’ transform viene applicata al centro dell’elemento da trasformare. Se vogliamo spostare il punto dell’applicazione, ecco un esempio:
transform-origin: 40px top;
In questo esempio il punto da dove verra’ applicata la trasformazione sara’ al top, spostato verso sinistra di 40 px.
Ecco questa e’ la sintassi della proprieta’ transform.
Alla prossima!