DOMMatrix.skewXSelf() — Methode · JavaScript-Referenz

Signatur

DOMMatrix.prototype.skewXSelf(sX)

Beschreibung

skewXSelf() ist die verändernde Variante von DOMMatrixReadOnly.skewX(). Die Methode multipliziert die aktuelle Matrix von rechts mit einer Scherungsmatrix entlang der X-Achse (this = this × skewX(sX)). Anders als skewX() wird dabei keine neue Matrix erzeugt, sondern das bestehende Objekt geändert und zurückgegeben. Mehrere Aufrufe lassen sich deshalb verketten.

Durch die Scherung verschieben sich Punkte horizontal, und zwar proportional zu ihrer Y-Koordinate: Aus (x, y) wird (x + tan(sX) · y, y). In der Matrix wird dafür der Eintrag c (bzw. m21) auf tan(sX) gesetzt, sofern er vorher 0 war. Das entspricht der CSS-Funktion skewX() und ist gut geeignet für Kursiv-Effekte, Parallelogramm-Formen oder Transformationen auf dem Canvas.

Die Scherung wird von rechts multipliziert. Deshalb wirkt sie auf einen Punkt vor den Transformationen, die schon in der Matrix stehen, genau wie bei der Schreibweise transform: translate(...) skewX(...) in CSS. Weil die Matrix direkt verändert wird, eignet sich die Methode besonders für Schleifen und Animationen, in denen man nicht bei jedem Frame neue Objekte anlegen will.

Parameter

Name	Typ	Default	Beschreibung
$sX	number	0	Scherwinkel entlang der X-Achse in Grad (nicht im Bogenmaß). Positive Werte neigen die Form nach links, wenn Y nach unten zeigt (wie im DOM und auf dem Canvas).

Rückgabewert

Typ

DOMMatrix

Beschreibung

Dieselbe DOMMatrix-Instanz, jetzt verändert (this). Dadurch sind Verkettungen möglich.

Beispiele

Matrix direkt scheren und Werte auslesen

const m = new DOMMatrix();
const result = m.skewXSelf(30);

// Es ist dasselbe Objekt, keine Kopie
console.log(result === m);
console.log(m.c.toFixed(4)); // tan(30°)
console.log(m.is2D);

true 0.5774 true

Parallelogramm-Effekt auf ein DOM-Element anwenden

const box = document.querySelector('.card');

const matrix = new DOMMatrix()
  .translateSelf(20, 0)
  .skewXSelf(-15);

// DOMMatrix lässt sich direkt als CSS-transform verwenden
box.style.transform = matrix.toString();
console.log(box.style.transform.startsWith('matrix('));

true

Reihenfolge beachten: Punkt transformieren

const m = new DOMMatrix().translateSelf(100, 0).skewXSelf(45);

// Zuerst wird geschert: (0, 10) → (10, 10), danach verschoben: → (110, 10)
const p = m.transformPoint(new DOMPoint(0, 10));
console.log(Math.round(p.x), Math.round(p.y));

110 10

Canvas-Animation ohne neue Matrix-Objekte

const ctx = document.querySelector('canvas').getContext('2d');
const base = new DOMMatrix();
let angle = 0;

const draw = () => {
  angle = (angle + 1) % 60;
  // Matrix zurücksetzen und neu scheren, dasselbe Objekt wird wiederverwendet
  base.setMatrixValue('matrix(1, 0, 0, 1, 150, 75)');
  base.skewXSelf(angle - 30);

  ctx.resetTransform();
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.setTransform(base);
  ctx.fillRect(-40, -25, 80, 50);
  requestAnimationFrame(draw);
};

requestAnimationFrame(draw);

// Wichtig · Fallstricke

Winkel in Grad: Anders als bei Math.tan() oder ctx.rotate() erwartet die Methode Grad. Übergibt man versehentlich einen Wert im Bogenmaß (z. B. Math.PI / 4), entsteht nur eine winzige Scherung von etwa 0,785°.
Rundungsfehler: skewXSelf(45) ergibt c = 0.9999999999999999 statt genau 1. Vergleiche Matrixwerte daher immer mit einer Toleranz.
Grenzwerte: Bei Winkeln nahe ±90° geht tan gegen unendlich. Dadurch entstehen extrem große Werte und praktisch unbrauchbare, fast singuläre Matrizen.
Verändert das Original: Wird dieselbe Matrix an mehreren Stellen genutzt, sind alle Stellen betroffen. Wer das Original behalten will, nimmt skewX() oder erzeugt vorher mit DOMMatrix.fromMatrix(m) eine Kopie.
Die Methode gibt es nur auf DOMMatrix, nicht auf DOMMatrixReadOnly. Früher hieß die Klasse WebKitCSSMatrix, und dieser Name existiert noch als Alias.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workers. In Node.js gibt es DOMMatrix nicht von Haus aus. Dort braucht man ein Polyfill, z. B. aus canvas- oder jsdom-Paketen.

Siehe auch

DOMMatrix DOMMatrixReadOnly.skewX() DOMMatrix.skewYSelf() DOMMatrix.rotateSelf() DOMMatrix.translateSelf() DOMMatrixReadOnly.transformPoint() TimeRanges.end()