skew()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die skew() CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene verzerrt. Das Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Diese Transformation ist eine Scherabbildung (Transvektion), die jeden Punkt innerhalb eines Elements durch einen bestimmten Winkel in horizontaler und vertikaler Richtung verzerrt. Der Effekt ist, als ob Sie jede Ecke des Elements greifen und sie entlang eines bestimmten Winkels ziehen.

Die Koordinaten jedes Punktes werden durch einen Wert verändert, der proportional zum angegebenen Winkel und dem Abstand zum Ursprung ist. Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der hinzufügte Wert.

Syntax

Die skew() Funktion wird mit entweder einem oder zwei Werten angegeben, die die Menge der Verzerrung darstellen, die in jede Richtung angewendet werden soll. Wenn Sie nur einen Wert angeben, wird er für die x-Achse verwendet und es erfolgt keine Verzerrung auf der y-Achse.

css
skew(ax)

skew(ax, ay)

Werte

ax

Ist ein <angle>, der den Winkel darstellt, mit dem das Element entlang der x-Achse verzerrt werden soll.

ay

Ist ein <angle>, der den Winkel darstellt, mit dem das Element entlang der y-Achse verzerrt werden soll. Wenn nicht definiert, ist der Standardwert 0, was zu einer reinen horizontalen Verzerrung führt.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
(1tan(ax)tan(ay)1)\left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right)
(1tan(ax)0tan(ay)10001)\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)
(1tan(ax)0tan(ay)10001)\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)
(1tan(ax)00tan(ay)10000100001)\left( \begin{array}{cccc} 1 & \tan(ax) & 0 & 0 \\ \tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 tan(ay) tan(ax) 1 0 0]

Formale Syntax

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )

Beispiele

Verzerrung nur auf der x-Achse

HTML

html
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

Ergebnis

Verzerrung auf beiden Achsen

HTML

html
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 1
# funcdef-transform-skew

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch