Funktion skewY

Die Funktion skewY bewirkt eine Schrägstellung des Elements entlang der Y-Achse und verwandelt es in ein Parallelogramm. Sie wird zusammen 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 oben, ein negativer - nach unten. Die Schrägstellung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt ist.

Syntax

cssSelektor {
  transform: skewY(Winkel);
}

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad nach oben geschrägt:

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

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

Результат:

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad nach unten geschrägt:

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

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

Результат:

Siehe auch