Una novità interessante dei CSS3 è la proprietà TRANSFORM che con i suoi vari attributi permette di ruotare, scalare, spostare e distorcere elementi HTML, (sia elementi in blocco che in linea), sfruttando i principi della grafica vettoriale 2D. Transform è ben supportata da Firefox, Safari ed Opera, che hanno i loro prefissi specifici, rispettivamente: -moz-, -webkit- e -o- che dovremo inserire in ogni regola CSS3.

Vediamo insieme le funzioni di Transform:

• Translate
Permette di spostare l'elemento lungo le assi X ed Y e Z prendendo come punto di partenza l'origine dello stesso (0,0) ovvero il suo baricentro.


css3 trasform translate
 

.sposta {<br />    transform: translate(100px,40px);<br />    -webkit-transform: translate(100px,40px); /* Safari e Chrome */<br />    -o-transform: translate(100px,40px); /* Opera */<br />    -moz-transform: translate(100px,40px); /* Firefox */<br />    }
L'elemento al quale verrà applicata la classe "sposta" viene spostato di 100px lungo l'asse X e 40px lungo l'asse Y.

• Rotate
Ruota l'elemento attorno al suo baricentro di quanti gradi specificati. Valori negativi ruotano l'elemento in senso antiorario.

rotate css3
 

.ruota {<br />    transform: rotate(30deg);<br />    -webkit-transform: rotate(30deg);<br />    -o-transform: rotate(30deg);<br />    -moz-transform: rotate(30deg);<br />    }
L'elemento al quale verrà applicata la classe "ruota" verrà ruotato di 30° in senso orario.

• Scale
Ridimensiona l'elemento ricalcolando i valori di altezza e larghezza attraverso valori proporzionali.

scale css3
 

.scala {<br />    transform: scale(2.0,1.5);<br />    -webkit-transform: scale(2.0,1.5);<br />    -o-transform: scale(2.0,1.5);<br />    -moz-transform: scale(2.0,1.5);<br />    }
All'elemento al quale sarà applicata la classe "scala" verrà raddoppiata la larghezza e l'altezza diventerà una volta e mezza quella originaria.

• Skew
Distorce l'elemento attraverso angolazioni sugli assi X e Y.

skew css3

.distorci {<br />    transform: skew(20deg, 10deg);<br />    -webkit-transform: skew(20deg, 10deg);<br />    -o-transform: skew(20deg, 10deg);<br />    -moz-transform: skew(20deg, 10deg);<br />    }
L'elemento verrà distorto per 20° sull'asse X e per 10° sull'asse Y.
 

La prorietà "trasform-origin"
Con i CSS3 possiamo anche modificare la posizione dell'origine con la proprietà 'transform-origin', nell'esempio:


.sposta-origine {<br />        transform-origin: 10px 30px;<br />    }
La classe "sposta-orgine", sposterà l'origine da 0,0 a 10px,30px, (in questo caso abbiamo dato i valori solo ai due assi bidimensionali, ma è possibile dare un valore anche alla profondità per creare degli effetti 3D – argomento che affronteremo in un tutorial prossimo venturo).

Questa trasformazione consente di spostare il punto "di origine" di un elemento: ciò significa che tutte le ulteriori trasformazioni eventualmente applicate a quell'elemento partiranno adesso da questo nuovo "baricentro".

I valori che possono assumere gli assi Y ed X sono lunghezze (anche in valori negativi), percentuali e "center", X può assumere anche valore "left" e "right", Y anche "top" e "bottom", mentre Z può avere solo valori espressi in lunghezze.

Queste funzioni già singolarmente producono interessanti effetti di manipolazione, ma combinati tra loro, anche insieme ad altre proprietà CSS possono offrire risultati incredibili, provare per credere!