Transform 2D in CSS3

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!