14 Trasformazioni 2d

Pubblicato il di

Grazie al css3 si possono creare trasformazioni 2d sugli elementi. Creiamo un div con dentro un paragrafo:

<div>
    <p>Ciao!</p>
</div>

ora applichiamo questo stile:

p {font-size: 100px;}
div {width: 300px; height: 300px; background: red}

ora vogliamo traslare verso destra il div col suo contenuto:

-webkit-transform: translateX(100px);

per questa funzione translate dobbiamo mettere il supporto al browser, in questo caso –webkit-transform per chrome e safari.

Ovviamente la controparte in verticale:

-webkit-transform: translateY(100px);

oppure combinate:

-webkit-transform: translate(100px,100px);

In maniera simile per la rotazione con rotate:

-webkit-transform: rotate(45deg);

Abbiamo ruotato di 45 gradi (deg) il nostro div.

Ovviamente si possono combinare più traslazioni:

-webkit-transform: rotate(45deg) translateX(150px) scale(2,1.2) skew(20deg, 15deg);

non è differente quale proprietà metto prima se translate o rotate o altre. Ho aggiunto anche scale che modifica la scala del div col primo valore, in questo caso 2 per le x e il secondo 1.2 per le y. Da notare che gli attributi della proprietà transform non vengono separati da nessuna punteggiatura.

Lo stiramento del div si ottiene con skew (x,y), ovviamente in gradi.

Posso anche applicare una trasformazione differente sul p che sta dentro al div trasformato.

Con piccoli script js o ancora meglio jquery, possiamo creare dei bellissimi effetti modificando le proprietà transorm.