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 Transformationsfunktionen darstellen, etwa 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-Transformationsfunktion.
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 repräsentiert das CSSTransformValue-Interface die transform-list selbst und kann iteriert werden, um jeden der Werte in der Transformation abzurufen.
Die konkreten Interfaces, die jede Transformationsfunktion 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, wobei 3D-Attribute ignoriert werden, wenn eine Komponente eine 2D-Transformation darstellt.
Dadurch kann ein einzelnes Interface sowohl die 2D- als auch die 3D-Form einer bestimmten Transformationsfunktion 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 |