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 auf 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 Schursabbildung (Transvektion), die jeden Punkt innerhalb eines Elements um einen bestimmten Winkel in horizontaler und vertikaler Richtung verzerrt. Der Effekt ist, als ob Sie jede Ecke des Elements greifen und entlang eines bestimmten Winkels ziehen würden.

Die Koordinaten jedes Punktes werden durch einen Wert angepasst, der proportional zu dem angegebenen Winkel und der Entfernung zum Ursprung ist. Daher gilt: Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der zugefügte Wert.

Syntax

css
skew(ax)

skew(ax, ay)

Werte

ax

Ist ein <angle>, der den Winkel darstellt, der verwendet wird, um das Element entlang der x-Achse zu verzerren.

ay Optional

Ist ein <angle>, der den Winkel darstellt, der verwendet wird, um das Element entlang der y-Achse zu verzerren. Wenn nicht definiert, ist der Standardwert 0, was zu einer rein horizontalen Schiefstellung 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]

Formaler Syntax

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

Beispiele

Schiefstellung 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

Schiefstellung 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