CSSTransformValue.values() — Methode · JavaScript-Referenz

Signatur

CSSTransformValue.prototype.values()

Beschreibung

Die Methode values() gehört zum Interface CSSTransformValue der CSS Typed Object Model API (Houdini). Ein CSSTransformValue stellt den Wert der CSS-Eigenschaft transform als Liste einzelner Transformationsfunktionen dar. values() gibt einen neuen Iterator zurück, der diese Funktionen in ihrer Reihenfolge liefert, also z. B. CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSPerspective oder CSSMatrixComponent.

Weil CSSTransformValue ein sogenanntes value-iterable Interface ist, verhält sich values() wie Array.prototype.values(). Dasselbe erreichst du auch direkt mit for...of, dem Spread-Operator oder Array.from(), denn [Symbol.iterator] verweist auf dieselbe Funktion.

Typische Einsatzfälle: Du willst eine bestehende Transformation analysieren, etwa um zu prüfen, ob schon eine Rotation vorhanden ist. Oder du willst einzelne Transformationskomponenten auslesen oder gezielt verändern, ohne Zeichenketten wie "translate(10px) rotate(45deg)" selbst zerlegen zu müssen.

Rückgabewert

Typ

Iterator<CSSTransformComponent>

Beschreibung

Ein neuer Iterator. Jeder Aufruf von next() liefert { value: CSSTransformComponent, done: false }, bis alle Komponenten durchlaufen sind. Danach kommt { value: undefined, done: true }.

Beispiele

Transformationen eines neu erzeugten Werts durchlaufen

const transform = new CSSTransformValue([
  new CSSTranslate(CSS.px(10), CSS.px(20)),
  new CSSRotate(CSS.deg(45)),
  new CSSScale(1.5, 1.5)
]);

for (const component of transform.values()) {
  console.log(component.constructor.name, component.toString());
}

CSSTranslate translate(10px, 20px) CSSRotate rotate(45deg) CSSScale scale(1.5, 1.5)

Iterator manuell mit next() abfragen

const transform = new CSSTransformValue([
  new CSSTranslate(CSS.px(5), CSS.px(0)),
  new CSSSkew(CSS.deg(10), CSS.deg(0))
]);

const it = transform.values();
console.log(it.next().value.toString());
console.log(it.next().value.toString());
console.log(it.next().done);

translate(5px, 0px) skew(10deg, 0deg) true

Prüfen, ob ein Element bereits rotiert ist

const box = document.querySelector('.box');
box.attributeStyleMap.set('transform', CSSStyleValue.parse('transform', 'translateX(50px) rotate(30deg)'));

const value = box.attributeStyleMap.get('transform');
const hasRotation = [...value.values()].some((c) => c instanceof CSSRotate);
console.log('Rotation vorhanden:', hasRotation);

Rotation vorhanden: true

Alle Komponenten in 2D-Varianten umwandeln

const value = CSSStyleValue.parse('transform', 'translate3d(10px, 20px, 30px) rotate(90deg)');

const components = Array.from(value.values(), (c) => {
  c.is2D = true; // Komponente als 2D behandeln (Z-Anteil ignorieren)
  return c.toString();
});
console.log(components);

["translate(10px, 20px)", "rotate(90deg)"]

// Wichtig · Fallstricke

Browser-Kompatibilität: Das CSS Typed OM wird in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4 unterstützt. Firefox unterstützt es derzeit nicht. Prüfe die Unterstützung vorab, z. B. mit if ('CSSTransformValue' in window).
Der Iterator liefert Referenzen auf die Komponenten, keine Kopien. Änderungen an einer Komponente (z. B. rotate.angle = CSS.deg(90)) ändern den CSSTransformValue. Auf das Element wirkt sich das aber erst aus, wenn du den Wert erneut mit attributeStyleMap.set() zuweist.
Ein Iterator lässt sich nur einmal durchlaufen. Für einen zweiten Durchlauf rufst du values() erneut auf oder wandelst das Ergebnis mit [...value] in ein Array um.
computedStyleMap().get('transform') liefert beim Wert none ein CSSKeywordValue und keinen CSSTransformValue. Prüfe den Typ daher vor dem Aufruf von values() mit instanceof CSSTransformValue.
Ein CSSTransformValue kann nicht leer erzeugt werden: new CSSTransformValue([]) wirft einen TypeError.

Siehe auch

Array.prototype.values() CSSFontFeatureValuesMap.has() CSSTransformValue.entries() CSSTransformValue.keys() CSSTransformValue.forEach()