Scritto da
Martedì, 01 Aprile 2014

CSS transform, i div e le sue trasformazioni

Trasformazioni CSS

Ci sono effetti, in questo caso trasformazioni ed animazioni che, oltre ad essere realizzate con librerie jQuery, possono essere create anche con il nostro caro CSS. Da un lato c’è la comodità di rendere il sito più leggero, senza inzupparlo di codici e dall'altro c’è la comodità, di chi non mastica tanto il linguaggio “js”, di trovare altrettante valide soluzioni.

 Vediamo un esempio di CSS transform:

esempio {
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

transform: rotate(10deg); Ruota l’elemento in senso orario a seconda dei gradi indicati, in questo caso 10.
I valori negativi determinano invece una rotazione in senso antiorario.

La proprietà transform può avere altre caratteristiche oltre al rotate:

transform: scale(1.3); modifica le dimensioni dell’immagine dove il primo valore numerico esprime una variazione di larghezza, mentre il secondo determina la lunghezza.
transform: skew(10deg,20deg); determina l’inclinazione dell’oggetto, dando l’effetto ad esempio di un rettangolo che viene tirato verso l’esterno da due angoli opposti, quasi a formare un rombo.

I due valori di skew rappresentano i gradi in base ai quali la trasformazione sarà applicata lungo l’asse orizzontale (primo valore) e quello verticale (secondo valore). Il secondo valore, è opzionale.

transform: translate(300px,200px); spostano l’elemento di un numero di pixel definito, attraverso l’asse orizzontale (primo valore) e verticale (secondo valore).

Trasformazioni multiple

È possibile combinare una o più trasformazioni nella stessa regola in questo modo:

transform: rotate(20deg) translate(100px, 50px) scale(1.2, 1.2);

Lasciate un commento se avete un dubbio. Buon tips’n tricks a tutti! ;)

Letto 871 volte
Vota questo articolo
(1 )

Forse ti possono interessare anche questi articoli:

Lascia un commento

Assicurati di inserire (*) le informazioni necessarie ove indicato.
Codice HTML non è permesso.