CSSSkew — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSSkew extends CSSTransformComponent

Beschreibung

CSSSkew gehört zur CSS Typed Object Model API (Houdini). Die Schnittstelle bildet die Transformationsfunktion skew(ax, ay) ab, also eine Scherung (Verzerrung) eines Elements entlang der X- und der Y-Achse. Sie erbt von CSSTransformComponent und steckt normalerweise als Eintrag in einem CSSTransformValue, der den gesamten Wert der Eigenschaft transform darstellt.

Statt Transformationen als Zeichenketten wie "skew(20deg, 10deg)" zusammenzusetzen und wieder zu zerlegen, arbeitest du mit echten Objekten. Die Winkel sind CSSNumericValue-Instanzen, zum Beispiel CSS.deg(20) oder CSS.rad(0.5). Das ist hilfreich bei Animationen, interaktiven Editoren oder überall dort, wo Transformationswerte oft gelesen und geändert werden. Du vermeidest damit fehleranfälliges Parsen von Zeichenketten.

Wichtige Mitglieder:

ax: Winkel der Scherung entlang der X-Achse (CSSNumericValue, les- und schreibbar)
ay: Winkel der Scherung entlang der Y-Achse (CSSNumericValue, les- und schreibbar)
is2D (geerbt): bei CSSSkew immer true, weil skew() eine reine 2D-Funktion ist
toMatrix() (geerbt): gibt die entsprechende DOMMatrix zurück
toString() (geerbt): liefert die CSS-Schreibweise, z. B. "skew(20deg, 10deg)"

Für eine Scherung entlang nur einer Achse gibt es die eigenen Schnittstellen CSSSkewX und CSSSkewY. Sie stehen für skewX() und skewY().

Parameter

Name	Typ	Default	Beschreibung
$ax Pflicht	CSSNumericValue		Winkel der Scherung entlang der X-Achse. Der Wert muss ein Winkeltyp sein, z. B. `CSS.deg(20)`, `CSS.rad(0.3)` oder `CSS.turn(0.1)`.
$ay Pflicht	CSSNumericValue		Winkel der Scherung entlang der Y-Achse. Auch hier ist nur ein Winkeltyp erlaubt. Für „keine Scherung“ übergibst du `CSS.deg(0)`.

Rückgabewert

Typ

CSSSkew

Beschreibung

Der Konstruktor new CSSSkew(ax, ay) gibt ein neues CSSSkew-Objekt zurück. Du kannst es in einen CSSTransformValue einfügen.

Beispiele

CSSSkew erzeugen und als CSS-Text ausgeben

// Scherung um 20° auf der X-Achse und 10° auf der Y-Achse
const skew = new CSSSkew(CSS.deg(20), CSS.deg(10));

console.log(skew.toString());
console.log(skew.ax.value, skew.ax.unit);
console.log(skew.is2D);

skew(20deg, 10deg) 20 "deg" true

Scherung auf ein Element anwenden

const card = document.querySelector('.card');

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

card.attributeStyleMap.set('transform', transform);
console.log(card.style.transform);

translate(10px, 0px) skew(-8deg, 0deg)

Vorhandenen skew()-Wert lesen und ändern

const box = document.querySelector('#box');
box.style.transform = 'rotate(5deg) skew(15deg, 5deg)';

const value = box.attributeStyleMap.get('transform');
const skew = [...value].find((c) => c instanceof CSSSkew);

if (skew) {
  // Scherung auf der X-Achse verdoppeln, ohne Zeichenketten zu parsen
  skew.ax = CSS.deg(skew.ax.to('deg').value * 2);
  box.attributeStyleMap.set('transform', value);
}

console.log(box.style.transform);

rotate(5deg) skew(30deg, 5deg)

In eine DOMMatrix umrechnen

const skew = new CSSSkew(CSS.deg(45), CSS.deg(0));
const m = skew.toMatrix();

// matrix(1, tan(ay), tan(ax), 1, 0, 0)
console.log(m.a, m.b, m.c.toFixed(3), m.d);

1 0 "1.000" 1

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-basierten Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Verfügbarkeit mit if ('CSSSkew' in window) und greife sonst auf element.style.transform mit Zeichenketten zurück.
Nur Winkel erlaubt: Übergibst du für ax oder ay keinen Winkeltyp, etwa CSS.px(10) oder eine reine Zahl, löst der Konstruktor bzw. der Setter einen TypeError aus.
is2D ist fest: skew() ist immer zweidimensional. Das Setzen von is2D wird ignoriert.
Eine Achse vs. beide Achsen: skewX(10deg) wird zu CSSSkewX, skewY() zu CSSSkewY. Nur skew() ergibt ein CSSSkew. Die Prüfung mit instanceof CSSSkew erkennt daher kein skewX().
Änderungen werden nicht automatisch übernommen: Wenn du ax/ay an einem gelesenen Objekt änderst, musst du den CSSTransformValue danach mit attributeStyleMap.set() zurückschreiben.
Berechnete Werte: computedStyleMap().get('transform') kann je nach Browser andere Komponenten liefern als die angegebenen. Willst du die angegebene Funktion verlässlich lesen, nutze attributeStyleMap.
Winkel nahe 90° führen zu sehr großen Tangenswerten und damit zu extremen Verzerrungen.

Siehe auch

CSSSkewX CSSSkewY CSS CSSRule CSSScale CSSValueList