CSSSkewX — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSSkewX extends CSSTransformComponent

Beschreibung

CSSSkewX gehört zur CSS Typed Object Model API (Houdini) und steht für eine einzelne skewX()-Funktion innerhalb eines transform-Werts. Das Element wird dabei entlang der X-Achse um einen Winkel geneigt. Das Interface erbt von CSSTransformComponent. Deshalb stehen auch is2D, toMatrix() und toString() zur Verfügung.

Mit new CSSSkewX(ax) erzeugen Sie ein Objekt. ax muss ein CSSNumericValue vom Typ Winkel sein, zum Beispiel CSS.deg(20) oder CSS.rad(0.5). Den Winkel können Sie über die Eigenschaft ax jederzeit lesen und ändern. Allein wird ein CSSSkewX nicht verwendet: Sie legen es in ein CSSTransformValue und schreiben es über attributeStyleMap.set() auf ein Element.

Der Vorteil gegenüber Zeichenketten wie el.style.transform = `skewX(${w}deg)`: Die Werte sind typisiert. Sie müssen keine Zeichenketten zusammensetzen oder zerlegen, und Einheiten werden geprüft. Das hilft vor allem bei Animationen und Interaktionen, in denen sich der Winkel oft ändert.

Parameter

Name	Typ	Default	Beschreibung
$ax Pflicht	CSSNumericValue		Konstruktor-Argument: Neigungswinkel entlang der X-Achse, z. B. `CSS.deg(15)`, `CSS.turn(0.1)` oder ein `CSSMathSum`. Er muss den Typ Winkel haben, sonst wird ein `TypeError` ausgelöst.

Rückgabewert

Typ

CSSSkewX

Beschreibung

Der Konstruktor gibt ein neues CSSSkewX-Objekt zurück. Eigenschaften: ax (lesbar und schreibbar, CSSNumericValue) und das geerbte is2D (immer true). Methoden: das geerbte toMatrix() (gibt eine DOMMatrix zurück) und toString() (gibt z. B. "skewX(20deg)" zurück).

Beispiele

Instanz erzeugen und serialisieren

const skew = new CSSSkewX(CSS.deg(20));

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

20 "deg" true skewX(20deg)

Neigung per Schieberegler auf ein Element anwenden

const box = document.querySelector('.box');
const slider = document.querySelector('#skew');

const skew = new CSSSkewX(CSS.deg(0));
const transform = new CSSTransformValue([skew]);

slider.addEventListener('input', () => {
  // Nur den Winkel ändern, keine Zeichenketten zusammensetzen
  skew.ax = CSS.deg(Number(slider.value));
  box.attributeStyleMap.set('transform', transform);
});

Vorhandenen transform-Wert auslesen und skewX finden

const el = document.querySelector('.card');
el.style.transform = 'rotate(5deg) skewX(12deg)';

const value = el.attributeStyleMap.get('transform');
for (const component of value) {
  if (component instanceof CSSSkewX) {
    console.log('Neigung:', component.ax.toString());
  }
}

Neigung: 12deg

In eine Matrix umrechnen

const skew = new CSSSkewX(CSS.deg(45));
const matrix = skew.toMatrix();

// Bei skewX landet tan(Winkel) im Feld c
console.log(matrix.c.toFixed(3));
console.log(matrix.is2D);

1.000 true

// Wichtig · Fallstricke

Browser-Unterstützung: In Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 verfügbar, in Safari ab 16.4. Firefox unterstützt das CSS Typed OM bisher nicht. Prüfen Sie die Verfügbarkeit mit if ('CSSSkewX' in window) und halten Sie el.style.transform als Ersatz bereit.
Für ax sind nur Winkel erlaubt. new CSSSkewX(CSS.px(10)) oder eine reine Zahl wie CSS.number(10) lösen einen TypeError aus.
is2D ist bei CSSSkewX immer true. Wenn Sie den Wert setzen, hat das keine Wirkung.
toMatrix() funktioniert nur mit absolut auflösbaren Werten. Enthält ax nicht auflösbare Anteile wie var(), wird ein TypeError ausgelöst.
Wenn Sie ax ändern, aktualisiert sich das Element nicht von selbst. Sie müssen den CSSTransformValue danach erneut mit attributeStyleMap.set() schreiben.
Für eine Neigung auf beiden Achsen gibt es CSSSkew, für die Y-Achse CSSSkewY.

Siehe auch

CSSSkew CSSSkewY CSSScale CSS CSSRule