Funktion skew

Die Funktion skew verzerrt ein Element und verwandelt es dadurch von einem Rechteck in ein Parallelogramm. Wird in Verbindung mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten. Die Verzerrung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.

Kann einen oder zwei Parameter akzeptieren, die durch Kommas getrennt werden. Wenn es zwei Parameter gibt - legt der erste Parameter die horizontale Verzerrung fest und der zweite - die vertikale. Wenn nur ein Parameter vorhanden ist - dann legt dieser die horizontale Verzerrung fest (und nicht in beide Richtungen). Parameter können sowohl positiv als auch negativ sein.

Syntax

cssSelektor {
  transform: skew(ein oder zwei Winkel);
}

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad nach links verzerrt:

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

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

Результат:

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad nach rechts verzerrt:

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

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

Результат:

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad vertikal verzerrt (positiver Wert):

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

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

Результат:

Beispiel

In diesem Beispiel wird das Blockelement um 30 Grad vertikal verzerrt (negativer Wert):

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

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

Результат:

Beispiel

Verzerrung sowohl entlang der X- als auch der Y-Achse festlegen:

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

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

Результат:

Siehe auch