Funzione skew
La funzione skew imposta l'inclinazione di un elemento,
trasformandolo così da rettangolo
in parallelogramma. Viene utilizzata insieme
alla proprietà transform.
Il valore della proprietà è un angolo in qualsiasi unità
per angoli. L'inclinazione avviene attorno
al punto definito dalla proprietà transform-origin.
Può accettare uno o due parametri, elencati separati da virgola. Se i parametri sono due - il primo parametro definisce l'inclinazione orizzontale, e il secondo - quella verticale. Se il parametro è uno - allora definisce l'inclinazione orizzontale (e non su entrambi gli assi). I parametri possono essere sia positivi che negativi.
Sintassi
selettore {
transform: skew(uno o due angoli);
}
Esempio
In questo esempio il blocco è inclinato di 30
gradi verso sinistra:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esempio
In questo esempio il blocco è inclinato di 30
gradi verso destra:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esempio
In questo esempio il blocco è inclinato di 30
gradi verticalmente (valore positivo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esempio
In questo esempio il blocco è inclinato di 30
gradi verticalmente (valore negativo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esempio
Impostiamo l'inclinazione simultaneamente sugli assi X e Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
