Signatur
Beschreibung
skewY() verkettet die aktuelle Matrix mit einer Scherung (Schrägstellung) entlang der y-Achse und gibt das Ergebnis als neue DOMMatrix zurück. Die Ursprungsmatrix bleibt dabei unverändert. Das entspricht der CSS-Transformationsfunktion skewY(): Punkte werden abhängig von ihrer x-Koordinate vertikal verschoben. Es gilt y' = y + x · tan(sY).
Die Scherungsmatrix sieht so aus: matrix(1, tan(sY), 0, 1, 0, 0). Sie wird von rechts an die bestehende Matrix multipliziert (this × skewY). Bei verketteten Aufrufen wie m.translate(...).skewY(...) wird die Scherung deshalb im bereits verschobenen Koordinatensystem angewendet. Das ist dieselbe Reihenfolge wie bei CSS-transform-Listen.
Typische Einsatzfälle sind: Transformationen für <canvas> berechnen (über ctx.setTransform()), CSS-Transformationen in JavaScript zusammensetzen und Punkte über transformPoint() in ein geschertes Koordinatensystem umrechnen. Wenn du die Matrix direkt verändern willst, statt eine neue anzulegen, nimm die veränderliche Variante DOMMatrix.prototype.skewYSelf().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $sY | number | 0 | Scherwinkel in Grad (nicht im Bogenmaß). Positive Werte scheren die Punkte rechts vom Ursprung nach unten (im Bildschirm-Koordinatensystem mit y-Achse nach unten). |
Rückgabewert
DOMMatrix, die das Produkt aus der Ursprungsmatrix und der y-Scherung ist. Aus einer 2D-Matrix entsteht wieder eine 2D-Matrix (is2D bleibt true).Beispiele
Einfache y-Scherung aus der Einheitsmatrix
const identity = new DOMMatrixReadOnly();
const skewed = identity.skewY(30);
console.log(skewed.b.toFixed(4)); // tan(30°)
console.log(skewed.is2D);
console.log(identity.b); // Ursprung bleibt unverändert
console.log(skewed instanceof DOMMatrix);Punkt durch die Scherung transformieren
const m = new DOMMatrixReadOnly().skewY(45);
// y' = y + x * tan(45°) = 0 + 100 * 1
const p = m.transformPoint(new DOMPoint(100, 0));
console.log(Math.round(p.x), Math.round(p.y));Scherung im Canvas um einen Mittelpunkt anwenden
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const cx = 150, cy = 75;
// In den Mittelpunkt verschieben, scheren, zurückverschieben
const matrix = new DOMMatrixReadOnly()
.translate(cx, cy)
.skewY(20)
.translate(-cx, -cy);
ctx.setTransform(matrix);
ctx.fillStyle = 'teal';
ctx.fillRect(100, 50, 100, 50);
ctx.resetTransform();Als CSS-Transformation auf ein Element anwenden
const box = document.querySelector('.box');
const base = new DOMMatrixReadOnly(getComputedStyle(box).transform === 'none'
? undefined
: getComputedStyle(box).transform);
box.style.transform = base.skewY(-15).toString();
console.log(box.style.transform);// Wichtig · Fallstricke
- Grad statt Bogenmaß: Anders als
Math.tan()oderCanvasRenderingContext2D.rotate()erwartetskewY()den Winkel in Grad.skewY(Math.PI / 4)schert also nur um etwa 0,785°. - Neue Instanz: Die Methode verändert die Matrix nicht. Wenn du den Rückgabewert nicht speicherst, geht das Ergebnis verloren. Zum direkten Ändern gibt es
DOMMatrix.prototype.skewYSelf(). - Singularität bei ±90°:
tan(90°)geht gegen unendlich. Winkel nahe ±90° ergeben also riesige Werte und praktisch unbrauchbare Matrizen. - Reihenfolge: Die Scherung wird von rechts multipliziert.
m.skewY(a).translate(x, y)ergibt also etwas anderes alsm.translate(x, y).skewY(a). - Gleitkomma: Rechne mit kleinen Rundungsfehlern (z. B.
0.9999999999999999statt1bei 45°). Vergleiche Werte daher mit einer Toleranz. - Kompatibilität: Wird von allen modernen Browsern und in Web Workern unterstützt. Ältere Browser kennen nur das veraltete
WebKitCSSMatrix. In Node.js gibt esDOMMatrixnicht von Haus aus, dafür brauchst du Polyfills (z. B. auscanvas-Paketen).