CSS  »  Articoli  »  CSS 3 

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

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.

Altri articoli

Altre guide

Altre newsletter