skew()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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

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 Scherung (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 um einen Wert verändert, der proportional zu dem angegebenen Winkel und der Entfernung vom Ursprung ist. Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der hinzugefügte Wert.

Syntax

css

skew(ax)

skew(ax, ay)

Werte

ax: Ist ein <angle>, der den Winkel repräsentiert, um den das Element entlang der x-Achse verzerrt werden soll.
ay Optional: Ist ein <angle>, der den Winkel repräsentiert, um den das Element entlang der y-Achse verzerrt werden soll. Wenn nicht definiert, ist der Standardwert 0, was zu einer rein horizontalen Verzerrung führt.

Kartesische Koordinaten auf ℝ^2	Homogene Koordinaten auf ℝℙ^2	Kartesische Koordinaten auf ℝ^3	Homogene Koordinaten auf ℝℙ^3
$\left( \begin{array}{cc} 1 & \tan(ax) \\ \tan(ay) & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(ax) & 0 \\ \tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\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

Siehe auch

transform
<transform-function>
skewX()
skewY()
Individuelle Transformations-Eigenschaften:
- translate
- scale
- rotate
- Hinweis: Es gibt keine skew-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden