skew()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die skew()
CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene schräg stellt. Das Ergebnis ist ein <transform-function>
Datentyp.
Probieren Sie es aus
Diese Transformation ist eine Scherung (Transvektion), die jeden Punkt innerhalb eines Elements um einen bestimmten Winkel in den horizontalen und vertikalen Richtungen verzerrt. Der Effekt ist, als ob Sie jede Ecke des Elements greifen und sie entlang eines bestimmten Winkels ziehen würden.
Die Koordinaten jedes Punktes werden um einen Wert geändert, der proportional zu dem angegebenen Winkel und der Entfernung zum Ursprung ist. Je weiter ein Punkt vom Ursprung entfernt ist, desto größer ist der hinzugefügte Wert.
Syntax
Die skew()
Funktion wird mit entweder einem oder zwei Werten angegeben, die die Menge der Verzerrung in jeder Richtung darstellen, die angewendet werden soll. Wenn Sie nur einen Wert angeben, wird dieser für die x-Achse verwendet und es wird keine Verzerrung auf der y-Achse geben.
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
-
Ist ein
<angle>
der den Winkel darstellt, 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
Beispiele
Verzerrung 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
Verzerrung 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 |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
skew() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.