Funktion skewX

Die Funktion skewX bewirkt eine Schrägstellung des Elements entlang der X-Achse und verwandelt es dabei in ein Parallelogramm. Sie wird in Verbindung mit der Eigenschaft transform verwendet. Als Wert dient ein Winkel in beliebigen Winkeleinheiten. Der Winkel kann sowohl positiv als auch negativ sein. Ein positiver Wert bewirkt eine Schrägstellung nach links, ein negativer - nach rechts. Die Schrägstellung erfolgt um den Punkt, der durch die Eigenschaft transform-origin angegeben wird.

Syntax

cssSelektor {
  transform: skewX(Winkel);
}

Beispiel

In diesem Beispiel wird der Block um 30 Grad nach links geschrägt:

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

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

Результат:

Beispiel

In diesem Beispiel wird der Block um 30 Grad nach rechts geschrägt:

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

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

Результат:

Siehe auch