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 schräg stellt. 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 Scherentransformation (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 modifiziert, der proportional zum angegebenen Winkel und der Entfernung zum Ursprung ist. Daher ist der Wert, der hinzugefügt wird, umso größer, je weiter ein Punkt vom Ursprung entfernt ist.
Syntax
skew(ax)
skew(ax, ay)
Werte
ax-
Ist ein
<angle>, der den Winkel darstellt, um das Element entlang der x-Achse zu verzerren. ayOptional-
Ist ein
<angle>, der den Winkel darstellt, um das Element entlang der y-Achse zu verzerren. Wenn nicht definiert, ist der Standardwert0, was zu einer rein horizontalen Schrägstellung 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
Schrägstellung nur entlang 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
Schrägstellung entlang beider 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 |
Browser-Kompatibilität
Loading…