CSSTransformComponent: Methode toMatrix()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Methode toMatrix() der Schnittstelle CSSTransformComponent gibt ein DOMMatrix-Objekt zurück.
Alle Transformationsfunktionen können mathematisch als 4x4-Transformationsmatrix dargestellt werden.
Hinweis:
Die Eigenschaft is2D beeinflusst, welche Transformation und damit welcher Matrixtyp zurückgegeben wird.
CSS-2D- und -3D-Transformationen unterscheiden sich aus Gründen der Abwärtskompatibilität.
Eine kurze Erklärung zu 2D- im Vergleich zu 3D-Transformationen finden Sie unter Verwenden von CSS-Transformationen.
Syntax
toMatrix()
Parameter
Keine.
Rückgabewert
Ein DOMMatrix-Objekt.
Ausnahmen
TypeError-
Wird ausgelöst, wenn Längen, die an der Erzeugung der Matrix beteiligt sind, keine mit px kompatiblen Einheiten haben (etwa relative Längen oder Prozentangaben).
Beispiele
Eine Komponente in eine Matrix umwandeln
const translate = new CSSTranslate(CSS.px(10), CSS.px(20));
const matrix = translate.toMatrix();
console.log(matrix.e, matrix.f); // 10 20
Umgang mit inkompatiblen Einheiten
toMatrix() löst einen Fehler aus, wenn eine Länge nicht in Pixel aufgelöst werden kann, beispielsweise eine Prozentangabe:
const translate = new CSSTranslate(CSS.percent(50), CSS.px(20));
try {
translate.toMatrix();
} catch (e) {
console.log(e); // TypeError
}
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # dom-csstransformcomponent-tomatrix |