CSSTransformComponent
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.
Das CSSTransformComponent-Interface der CSS Typed Object Model API ist das Basis-Interface für Objekte, die einzelne Transform-Funktionen darstellen, wie rotate() und scale().
Instanzeigenschaften
CSSTransformComponent.is2D-
Ein boolescher Wert, der angibt, ob die Transformation 2D oder 3D ist.
Instanzmethoden
CSSTransformComponent.toMatrix()-
Gibt ein neues
DOMMatrix-Objekt zurück. CSSTransformComponent.toString()-
Ein String in Form einer CSS-Transform-Funktion.
Auf CSSTransformComponent basierende Interfaces
Beschreibung
Das CSSTransformComponent-Interface ist das abstrakte Basis-Interface für Objekte, die eine einzelne <transform-function> in der transform-list von Werten darstellen, wie sie von der CSS-Eigenschaft transform verwendet wird.
Ein isoliertes CSSTransformComponent kann keinen CSS-Eigenschaftswert darstellen.
Stattdessen stellt das CSSTransformValue-Interface die transform-list selbst dar und kann iteriert werden, um jeden der Werte in der Transformation abzurufen.
Die konkreten Interfaces, die jede Transform-Funktion darstellen, sind im vorherigen Abschnitt aufgeführt (das Interface verfügt über keinen eigenen Konstruktor und kann daher nicht direkt instanziiert werden).
Das Interface verfügt über eine is2D-Eigenschaft, um zu bestimmen, ob eine Komponente eine 2D- oder 3D-Transformation ist.
Diese wird verwendet, um die Ausgabe zu formatieren und 3D-Attribute zu ignorieren, wenn eine Komponente eine 2D-Transformation darstellt.
Dadurch kann ein einzelnes Interface sowohl die 2D- als auch die 3D-Form einer bestimmten Transform-Funktion darstellen.
Beispiele
Grundlegende Verwendung
Dieses Beispiel zeigt, wie Sie eine CSSTranslate-Instanz (einen der von CSSTransformComponent abgeleiteten Typen) erstellen und ihre Matrix- und String-Darstellungen auslesen können.
const translate = new CSSTranslate(CSS.px(10), CSS.px(20));
console.log(translate.is2D); // true
console.log(translate.toString()); // "translate(10px, 20px)"
const matrix = translate.toMatrix();
console.log(matrix.e, matrix.f); // 10 20
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # csstransformcomponent |