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 kippt. Ihr 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 (Transvektierung), 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.
Die Koordinaten jedes Punktes werden durch einen Wert geändert, der proportional zum angegebenen Winkel und zur Entfernung zum Ursprung ist. Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der hinzugefügte Wert.
Syntax
skew(ax)
skew(ax, ay)
Werte
ax-
Ist ein
<angle>, der den Winkel repräsentiert, der verwendet wird, um das Element entlang der x-Achse zu verzerren. ayOptional-
Ist ein
<angle>, der den Winkel repräsentiert, der verwendet wird, um das Element entlang der y-Achse zu verzerren. Wenn nicht definiert, ist der Standardwert0, was zu einer rein horizontalen Verzerrung führt.
| Kartesische Koordinaten auf ℝ^2 | Homogene Koordinaten auf ℝℙ^2 | Kartesische Koordinaten auf ℝ^3 | Homogene Koordinaten auf ℝℙ^3 |
|---|---|---|---|
|
|
|
|
|
[1 tan(ay) tan(ax) 1 0 0] |
Formale Syntax
<skew()> =
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
Beispiele
Kippen nur auf der x-Achse
HTML
<div>Normal</div>
<div class="skewed">Skewed</div>
CSS
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Equal to skewX(10deg) */
background-color: pink;
}
Ergebnis
Kippen auf beiden Achsen
HTML
<div>Normal</div>
<div class="skewed">Skewed</div>
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 |