`skew()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die skew() CSS Funktion definiert eine Transformation, die ein Element in der 2D-Ebene schräg stellt. Sein 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 Scherspiegelung (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 geändert, 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 ihm hinzugefügt wird.

Syntax

css

skew(ax)

skew(ax, ay)

Werte

ax: Ist ein <angle>, der den Winkel repräsentiert, mit dem das Element entlang der x-Achse verzerrt wird.
ay Optional: Ist ein <angle>, der den Winkel repräsentiert, mit dem das Element entlang der y-Achse verzerrt wird. Wenn nicht definiert, beträgt 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

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;
}