Paolo De Feo
a- a+

CSS3 transform e attributi Rotate, Translate, Scale, Skew per spostare e cambiare elementi HTML

Vediamo come impostare e come usare le nuove proprietà CSS3 note come 2D Transforms.

Tra le nuove proprietà CSS3, molto interessanti sono quelle denominate come “2D Transforms”, specifiche che ci permettono di spostare, scalare, ruotare e girare DIV, paragrafi e elementi pagina. Tale proprietà è supportata da tutti i browser, ma c’è bisogno di implementare un prefisso specifico per ogni software di navigazione.

Metodo rotate

Il metodo “rotate” permette di ruotare in senso orario un elemento rispetto alla sua posizione originaria. È possibile anche implementare elementi in senso antiorario. Esempio:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

La rotazione in questo caso è di 30 gradi in senso orario.

Metodo translate

Il metodo “translate” sposta un elemento o un DIV di una pagina dalla sua posizione originaria lungo gli assi X, Y e Z. Il punto di partenza è dato dall’origine (posizione 0,0). Esempio:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari e Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

In questo esempio abbiamo spostato il nostro elemento di 50 pixel lungo l’asse X e 100 lungo quello Y.

Metodo scale

Il metodo “scale” permette di incrementare o diminuire le dimensioni degli elementi desiderati. Esempio:

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari e Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

All’elemento modificato verrà raddoppiata la larghezza e quadruplicata l’altezza.

Metodo Skew

Il metodo “skew” è quello che permette le trasformazioni più articolate: consente infatti la distorsione degli oggetti pagina scelti. Esempio:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari e Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

In questo esempio è stata applicata una distorsione all’elemento desiderato di 30 gradi sull’asse X e 20 su quello Y.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 2 commenti