DOMMatrixReadOnly.skewX() — Methode · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.prototype.skewX(sx)

Beschreibung

skewX() schert eine Transformationsmatrix entlang der x-Achse: Punkte werden abhängig von ihrer y-Koordinate horizontal verschoben. Das entspricht der CSS-Funktion skewX(). Die Methode multipliziert die aktuelle Matrix von rechts mit einer Schermatrix, deren Eintrag c den Wert tan(sx) hat. Es gilt also ergebnis = this × skewX(sx).

Die Methode gehört zu DOMMatrixReadOnly und verändert die Ausgangsmatrix nicht. Sie gibt immer eine neue DOMMatrix zurück. Deshalb kann man mehrere Transformationen gefahrlos verketten, etwa m.translate(10, 0).skewX(20). Soll die bestehende Matrix direkt geändert werden, nimmt man DOMMatrix.prototype.skewXSelf().

Typische Einsatzfälle sind das Berechnen von CSS-Transformationen in JavaScript, Transformationen auf einem <canvas> mit setTransform() und das Umrechnen einzelner Punkte mit DOMPoint.matrixTransform(), zum Beispiel für Hit-Tests bei gescherten Elementen.

Parameter

Name	Typ	Default	Beschreibung
$sx	number	0	Scherwinkel in Grad (nicht Bogenmaß). Positive Werte scheren nach rechts, negative nach links.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue, veränderbare DOMMatrix, die aus der Ausgangsmatrix und der Scherung entlang der x-Achse besteht. Die ursprüngliche Matrix bleibt unverändert.

Beispiele

Einfache Scherung einer Einheitsmatrix

const identity = new DOMMatrixReadOnly();
const skewed = identity.skewX(30);

// Der Eintrag c enthält tan(30°)
console.log(skewed.c.toFixed(4));
console.log(skewed.is2D);
// Die Ausgangsmatrix bleibt unverändert
console.log(identity.c);

0.5774 true 0

Punkt mit einer gescherten Matrix umrechnen

const matrix = new DOMMatrixReadOnly().skewX(30);

// Ein Punkt 10 px unterhalb des Ursprungs wird nach rechts verschoben
const point = new DOMPoint(0, 10).matrixTransform(matrix);
console.log(point.x.toFixed(3), point.y);

5.774 10

Verkettete Transformation auf ein Element anwenden

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

const transform = new DOMMatrixReadOnly()
  .translate(50, 20)
  .skewX(-15)
  .scale(1.2);

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

true

Canvas-Zeichnung scheren

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const m = new DOMMatrix().translate(100, 50).skewX(20);
ctx.setTransform(m);

ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, 80, 60); // wird als Parallelogramm gezeichnet
ctx.resetTransform();

// Wichtig · Fallstricke

Grad statt Bogenmaß: sx wird in Grad angegeben, anders als bei Math.tan() oder CanvasRenderingContext2D.rotate().
Nahe 90°: Bei Winkeln nahe ±90° geht tan(sx) gegen unendlich. Die Matrix bekommt dann extrem große Werte und ist praktisch unbrauchbar.
Gleitkomma-Rundung: skewX(45) ergibt für c meist 0.9999999999999999 statt genau 1. Vergleiche deshalb mit Toleranz durchführen.
Reihenfolge zählt: Die Scherung wird von rechts multipliziert. m.translate(10, 0).skewX(20) ergibt ein anderes Ergebnis als m.skewX(20).translate(10, 0).
Nicht verändernd: Jeder Aufruf erzeugt ein neues Objekt. In Animationsschleifen mit vielen Aufrufen kann skewXSelf() auf einer DOMMatrix effizienter sein.
Kompatibilität: Wird in allen aktuellen Browsern und in Web Workers unterstützt. Node.js stellt DOMMatrix nicht von Haus aus bereit.

Siehe auch

DOMMatrixReadOnly DOMMatrixReadOnly.skewY() DOMMatrix.skewXSelf() DOMMatrixReadOnly.rotate() DOMMatrixReadOnly.transformPoint() DOMPoint StylePropertyMapReadOnly.keys()