skew()

Baseline Widely available

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

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

Probieren Sie es aus

transform: skew(0);

transform: skew(15deg, 15deg);

transform: skew(-0.06turn, 18deg);

transform: skew(0.312rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Diese Transformation ist eine Scherabbildung (Transvektion), die jeden Punkt innerhalb eines Elements um einen bestimmten Winkel in den horizontalen und vertikalen Richtungen verzerrt. Der Effekt ist, als ob Sie jede Ecke des Elements an einem bestimmten Winkel herausziehen würden.

Die Koordinaten jedes Punktes werden um einen Wert modifiziert, der proportional zum angegebenen Winkel und der Entfernung zum Ursprung ist. Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der Wert, der hinzugefügt wird.

Syntax

css
skew(ax)

skew(ax, ay)

Werte

ax

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

ay Optional

Ist ein <angle>, der den Winkel darstellt, mit dem das Element entlang der y-Achse verzerrt wird. Wenn nicht definiert, ist der Standardwert 0, was in einer rein horizontalen Schrägstellung resultiert.

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

Schrägstellung 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

Schrägstellung 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

Siehe auch