Trasformazioni 2D con i CSS3

Ruotare, traslare, inclinare e scalare oggetti con i CSS

Il modulo Transforms incluso nella specifica del CSS3 (http://www.w3.org/TR/css3-2d-transforms) consente di effettuare manipolazioni 2D sugli elementi contenuti nella pagina.

Il modello di formattazione visiva del CSS (http://www.w3.org/TR/REC-CSS2/visuren.html) descrive il sistema di coordinate con cui ogni elemento è posizionato nella pagina. Posizione e dimensione degli oggetti possono essere espresse in pixel partendo dall’angolo in alto a sinistra dell’elemento genitore procedendo verso destra e in basso.

Le coordinate nello spazio possono essere modificate attraverso la proprietà transform con cui è possibile traslare, ruotare, inclinare o scalare gli elementi.

Il sistema di coordinate utilizzato dalla proprietà è lo stesso stabilito nella specifica SVG 1.1 (http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace). Tale sistema di coordinate è costituito da due assi: X che si estende orizzontalmente verso destra e Y che si estende verticalmente verso il basso (Figura 1).

Figura 1 – Sistema di coordinate Sistema di coordinate

Supporto dei browser

È bene fare una precisazione sul supporto dei browser prima di procedere ulteriormente. Il supporto nella forma standard del modulo è pressochè nullo; ognuno dei browser, però, fornisce la propria alternativa consentendo quindi di estendere il supporto a tutte le ultime versioni. Ovviamente Internet Explorer non fornisce alcun tipo di supporto alla proprietà.

Le alternative dei vari browser sono, come di consueto, caratterizzate da un suffisso identificativo prima della proprietà.

Chi volesse estendere tali proprietà anche al browser di casa Microsoft, può utilizzare cssSandPaper, uno script Javascript che consente di integrare le proprietà di trasformazione anche al suddetto browser. Il funzionamento è semplicissimo, è sufficiente utilizzare una ulteriore proprietà nel CSS con il suffisso -sand-.

Le proprietà transform e transform-origin

Come detto nel paragrafo precedente, il modulo ci consente di effettuare delle trasformazioni su un oggetto presente nella pagina. Le trasformazioni possono anche essere combinate tra loro. È possibile, ad esempio, ruotare e scalare contemporaneamente un’immagine oppure inclinare e capovolgere un oggetto, etc.

Le proprietà messe a disposizione sono due, ovvero:

  • transform con cui si specificano le trasformazioni da effettuare.
  • transform-origin con cui si specifica il punto di origine da cui avviene la trasformazione.

La proprietà transform

La proprietà contiene la lista delle funzioni di trasformazione da effettuare sull’oggetto. Di default tale proprietà è settata su none.

Un semplice esempio del suo utilizzo, che comprende anche le proprietà alternative dei vari browser, è il seguente:


#object {
 ...
 transform: rotate(40deg);         /* standard */
 -moz-transform: rotate(40deg);    /* firefox */
 -webkit-transform: rotate(40deg); /* safari */
 -o-transform: rotate(40deg);      /* opera */
}

L’esempio è disponibile su questa pagina.

La proprietà transform-origin

transform-origin stabilisce il punto di origine della trasformazione. La proprietà richiede due valori, il primo riferito all’asse X e il secondo riferito all’asse Y. Inizialmente entrambi i valori hanno valore 50%, quindi si riferiscono al centro dell’oggetto. I valori possono essere espressi in percentuale, in una delle unità di misura dei CSS (px, em, etc.) oppure attraverso le keyword left, center, right per l’asse X e top, center, bottom per l’asse Y. Nel caso in cui si scelga l’ultima modalità e viene omesso uno dei due valori, esso di default corrisponderà a center.

Vediamo un classico esempio sull’utilizzo della proprietà:


#object {
 ...
 transform: rotate(40deg);         /* standard */
 transform-origin: left bottom;
 -moz-transform: rotate(40deg);    /* firefox */
 -moz-transform-origin: left bottom;
 -webkit-transform: rotate(40deg); /* safari */
 -webkit-transform-origin: left bottom;
 -o-transform: rotate(40deg);      /* opera */
 -o-transform-origin: left bottom;
}

L’esempio è disponibile in questa semplice demo.

Le funzioni di trasformazione

Abbiamo visto finora che è possibile trasformare un oggetto e definire il punto da cui effettuare tale trasformazione. Vediamo adesso quali sono le funzioni che la specifica mette a disposizione fornendo anche alcuni esempi esplicativi.

Matrix

La funzione consente di effettuare una trasformazione in forma di matrice a sei valori come quella contenuta nella specifica SVG (http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined).

La funzione è espressa nella seguente forma:


matrix( a, b, c, d, tx, ty );

dove a, b, c, d costruiscono la matrice e gli ultimi due indicano il valore di traslazione.

Un esempio pratico, disponibile anche su questa pagina, è il seguente:


#object {
 ...
 transform: matrix(1, -0.2, 0, 1, 0, 0);
 -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); 
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -o-transform:matrix(1, -0.2, 0, 1, 0, 0);
}

I browser con motore grafico Gecko (Firefox) accettano valori espressi anche in unità di misura per tx e ty mentre i browser con motore Webkit (Safari, Chrome) e Opera accettano valori senza unità di misura.

Translate

La funzione consente di traslare l’oggetto in base al valore passato alla funzione. La funzione prende in ingresso uno o due valori che indicano rispettivamente l’asse X e l’asse Y. Se il secondo parametro non viene passato, la traslazione sull’asse Y assume valore zero.

Il seguente esempio effettua uno spostamento dell’oggetto di 10px su entrambi gli assi:


#object {
 ...
  transform: translate(10px, 10px);
  -moz-transform: translate(10px, 10px);
  -webkit-transform: translate(10px, 10px);
  -o-transform: translate(10px, 10px);
}

Esempio.

TranslateX – TranslateY

Le due funzioni sono del tutto simili all’esempio precedente con la sola differenza che prendono in ingresso un unico parametro riferito all’asse.

Scale

La funzione scale consente di ridimensionare l’oggetto in base ai valori passati come parametri; se viene passato un solo parametro, esso viene assegnato ad entrambi gli assi.

Se il valore è maggiore di 1, la dimensione dell’oggetto verrà ingrandita mentre, se il valore è compreso tra 0 e 1, la dimensione verrà ridotta.

Il codice necessario è il seguente:


#object {
 ...
  transform: scale(0.5);
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
}

Possiamo vedere “dal vivo” due esempi del suo utilizzo:

Esempio 1 – Ingrandimento dell’oggetto

Esempio 2 – Rimpicciolimento dell’oggetto

Scale X – Scale Y

Come per la funzione Translate, anche queste funzioni consentono di ridimensionare l’oggetto solo su uno degli assi.

Rotate

Probabilmente la funzione al momento più famosa, rotate consente di ruotare l’oggetto in base al numero di gradi passati come parametro.

Un esempio è il seguente:


#object {
 ...
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

È possibile vederlo all’opera su questa pagina.

Skew

La funzione distorce l’oggetto per un valore pari al numero di gradi passati come parametro. Se vengono passati due parametri l’inclinazione verrà effettuata su entrambi gli assi, altrimenti solo sull’asse X.

L’esempio seguente effettuerà un’inclinazione di 15 gradi sull’asse X e 20 gradi sull’asse Y. Lo stesso esempio è disponibile qui:


#object {
    ...
    transform: skew(15deg, 20deg);
    -moz-transform: skew(15deg, 20deg);
    -webkit-transform: skew(15deg, 20deg);
    -o-transform: skew(15deg, 20deg);
}

SkewX – SkewY

Come per le funzioni precedenti, anche in questo caso entrambe si riferiscono all’inclinazione di uno solo degli assi.

Trasformazioni multiple per un oggetto

Come abbiamo detto ad inizio articolo, è possibile assegnare una lista di trasformazioni ad un oggetto. Quindi non una sola funzione per oggetto ma anche funzioni multiple.

Vediamo un semplicissimo esempio di funzioni multiple assegnate ad un contenitore.


transform: rotate(180deg) skew(20deg, 30deg) scale(2);

È possibile vedere il risultato dell’esempio in questa pagina.

Tutti gli esempi sono disponibili per il download.