Funzione skewX

La funzione skewX imposta l'inclinazione di un elemento lungo l'asse X, trasformandolo così in un parallelogramma. Viene utilizzata insieme alla proprietà transform. Il valore della proprietà è un angolo in qualsiasi unità di misura per angoli. L'angolo può essere sia positivo che negativo. Un valore positivo inclina l'elemento a sinistra, uno negativo - a destra. L'inclinazione avviene attorno al punto specificato dalla proprietà transform-origin.

Sintassi

cssselettore {
  transform: skewX(angolo);
}

Esempio

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

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

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

Результат:

Esempio

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

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

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

Результат:

Vedi anche