HTML and CSS Reference
In-Depth Information
di origine tramite la distanza (percentuale o assoluta) dal bordo destro e dal bordo superiore
dell'elemento.
nota
Le specifiche per le trasformazioni 2D non sono ancora definitive. Per consultare
le specifiche potete interrogare l'indirizzo: http://aspit.co/a0s .
Nel prossimo esempio vediamo come applicare una trasformazione di tipo skew a un ele-
mento div .
Esempio 5.19
div
{
height: 100px;
width: 100px;
border: solid 1px black;
transform: skew(20deg, 10deg);
transform-origin: 50% 50%;
}
Il primo parametro della trasformazione specifica lo skew sull'asse delle X, mentre il se-
condo specifica lo skew sull'asse delle Y. Se il secondo parametro viene omesso, lo skew
sull'asse delle Y è pari a zero. Come origine è stato impostato il centro dell'elemento (che è
il valore di default, quindi può essere omesso), ma cambiando le percentuali della proprie-
transform-origin possiamo modificare questo comportamento. Nella figura 5.15
possiamo vedere i vari passi della trasformazione.
Figura 5.15 - Il primo elemento non ha alcuna trasformazione skew applicata. Al secondo
elemento è stato applicato lo skewX, mentre al terzo elemento sono stati applicati sia lo
skewX sia lo skewY.
Search WWH ::




Custom Search