Signatur
Beschreibung
scale3dSelf() ist die verändernde Variante von DOMMatrix.scale3d(). Die Methode multipliziert die aktuelle Matrix von rechts mit einer gleichmäßigen 3D-Skalierungsmatrix. Dabei ändert sie das Objekt selbst und gibt keine Kopie zurück. Das entspricht der CSS-Transformation scale3d(s, s, s).
Mit den optionalen Parametern originX, originY und originZ legst du den Punkt fest, um den herum skaliert wird. Intern läuft das so ab: erst eine Verschiebung zum Ursprung, dann die Skalierung, dann die Verschiebung zurück. Das funktioniert wie transform-origin in CSS.
Die Methode eignet sich, wenn du eine Transformation Schritt für Schritt aufbaust und dabei keine Zwischenobjekte erzeugen willst, zum Beispiel in Animationsschleifen, bei WebGL- oder Canvas-Berechnungen oder bei 3D-Effekten mit CSS. Weil der Rückgabewert dieselbe Matrix ist, lassen sich mehrere …Self()-Aufrufe verketten.
Wichtig: Ist scale ungleich 1, setzt die Methode is2D auf false. Die Matrix gilt danach als 3D-Matrix, und toString() liefert matrix3d(…) statt matrix(…).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $scale | number | 1 | Einheitlicher Skalierungsfaktor für alle drei Achsen. Werte über 1 vergrößern, Werte zwischen 0 und 1 verkleinern, negative Werte spiegeln. |
| $originX | number | 0 | X-Koordinate des Punkts, um den herum skaliert wird. |
| $originY | number | 0 | Y-Koordinate des Punkts, um den herum skaliert wird. |
| $originZ | number | 0 | Z-Koordinate des Punkts, um den herum skaliert wird. |
Rückgabewert
DOMMatrix-Instanz (this). Deshalb lassen sich Aufrufe verketten.Beispiele
Einfache gleichmäßige 3D-Skalierung
const m = new DOMMatrix();
const result = m.scale3dSelf(2);
console.log(result === m); // gleiche Instanz
console.log(m.is2D);
console.log(m.toString());Skalieren um einen Ursprung und einen Punkt transformieren
// Um den Mittelpunkt (50, 50, 0) einer 100×100-Fläche skalieren
const m = new DOMMatrix().scale3dSelf(2, 50, 50, 0);
console.log(m.m41, m.m42, m.m43);
const p = m.transformPoint(new DOMPoint(10, 10, 10));
console.log(p.x, p.y, p.z);Pulsierender 3D-Effekt auf einem Element
const box = document.querySelector('.box');
const base = new DOMMatrix().rotateSelf(20, 30, 0);
const animate = (t) => {
const factor = 1 + 0.2 * Math.sin(t / 300);
// Kopie der Basismatrix, danach direkt verändern (keine weiteren Zwischenobjekte)
const m = DOMMatrix.fromMatrix(base).scale3dSelf(factor);
box.style.transform = m.toString();
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);Unterschied zu scale3d()
const original = new DOMMatrix();
const copy = original.scale3d(3); // original bleibt unverändert
console.log(original.m11, copy.m11);
original.scale3dSelf(3); // original wird verändert
console.log(original.m11);// Wichtig · Fallstricke
- Verändert das Objekt: Wenn du die Ausgangsmatrix noch brauchst, nutze
scale3d()oder kopiere sie vorher mitDOMMatrix.fromMatrix(m). - Nur für
DOMMatrix:DOMMatrixReadOnlyhat keine…Self()-Methoden. Dort gibt es nurscale3d(). - Reihenfolge zählt: Die Skalierung wird von rechts multipliziert, also relativ zum schon transformierten Koordinatensystem. Ein
translateSelf()vorher und eins nachher führen zu unterschiedlichen Ergebnissen. - Nur gleichmäßig: Für unterschiedliche Faktoren pro Achse nimmst du
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ). is2Dwirdfalse: Das passiert schon bei jedem Faktor ungleich1, auch wenn nur 2D-Inhalte betroffen sind. Code, dermatrix(…)-Zeichenketten erwartet, bekommt dannmatrix3d(…).- Faktor
0: Die Matrix wird singulär.invertSelf()liefert danach eine Matrix ausNaN-Werten. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt. In Node.js gibt es
DOMMatrixnicht von Haus aus, dafür brauchst du Polyfills bzw. Pakete wiecanvas. Das alteWebKitCSSMatrixist in modernen Browsern nur noch ein Alias fürDOMMatrix.