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

cssselettore {
  transform: skew(uno o due angoli);
}

Esempio

In questo esempio il blocco è inclinato di 30 gradi verso sinistra:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esempio

In questo esempio il blocco è inclinato di 30 gradi verso destra:

html<div id="elem">lorem ipsum</div>

css#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):

html<div id="elem">lorem ipsum</div>

css#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):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esempio

Impostiamo l'inclinazione simultaneamente sugli assi X e Y:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Vedi anche