CSSSkew.ax — Eigenschaft · JavaScript-Referenz

Signatur

CSSSkew.ax

Beschreibung

Die Eigenschaft ax gehört zur Schnittstelle CSSSkew des CSS Typed Object Model (Houdini). Ein CSSSkew-Objekt entspricht der CSS-Funktion skew(ax, ay). Mit ax liest oder setzt man den Verzerrungswinkel entlang der x-Achse als typisierten Wert statt als Zeichenkette.

Der Wert ist immer ein CSSNumericValue, der zum Typ angle passen muss, etwa CSS.deg(15), CSS.rad(0.3) oder CSS.turn(0.05). Auch berechnete Ausdrücke wie CSSMathSum sind zulässig, solange am Ende ein Winkel herauskommt. Das ist vor allem bei Animationen und interaktiven Effekten nützlich: Man kann den Zahlenwert direkt ändern und muss keine Zeichenketten wie "skew(12deg)" zusammenbauen oder zerlegen.

Wichtig: Eine Änderung an ax betrifft nur das JavaScript-Objekt. Sichtbar wird sie erst, wenn man die umgebende CSSTransformValue wieder mit element.attributeStyleMap.set('transform', …) auf das Element schreibt.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen) Pflicht	CSSNumericValue		Neuer Verzerrungswinkel für die x-Achse. Er muss vom Typ angle sein, z. B. `CSS.deg(20)`. Andere Typen wie Längen oder reine Zahlen lösen einen `TypeError` aus.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der aktuelle Verzerrungswinkel entlang der x-Achse, meist ein CSSUnitValue mit einer Winkeleinheit wie deg, rad, grad oder turn.

Beispiele

CSSSkew erzeugen und ax auslesen

const skew = new CSSSkew(CSS.deg(10), CSS.deg(5));

console.log(skew.ax.value);      // Zahlenwert
console.log(skew.ax.unit);       // Einheit
console.log(skew.ax.toString()); // als CSS-Text
console.log(skew.toString());

10 deg 10deg skew(10deg, 5deg)

ax neu setzen und Typprüfung

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

// Andere Winkeleinheiten sind erlaubt
skew.ax = CSS.turn(0.05);
console.log(skew.ax.to('deg').toString());

// Eine Länge ist kein Winkel und löst einen Fehler aus
try {
  skew.ax = CSS.px(10);
} catch (err) {
  console.log(err.name);
}

18deg TypeError

Verzerrung beim Mausbewegen live anpassen

const card = document.querySelector('.card');
const skew = new CSSSkew(CSS.deg(0), CSS.deg(0));
const transform = new CSSTransformValue([skew]);

card.addEventListener('pointermove', (event) => {
  const rect = card.getBoundingClientRect();
  // Relative Position von -0.5 bis 0.5
  const relX = (event.clientX - rect.left) / rect.width - 0.5;
  skew.ax = CSS.deg(relX * 20); // maximal ±10deg
  // Erst durch erneutes Setzen wird die Änderung sichtbar
  card.attributeStyleMap.set('transform', transform);
});

card.addEventListener('pointerleave', () => {
  card.attributeStyleMap.delete('transform');
});

// Wichtig · Fallstricke

Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern (ab Chrome/Edge 66) und in Safari ab 16.4. Firefox unterstützt es bislang nicht. Deshalb vorher prüfen, etwa mit if ('CSSSkew' in window), und sonst auf element.style.transform = 'skew(…)' ausweichen.
Nur Winkel sind erlaubt: Zahlen ohne Einheit (CSS.number(5)) oder Längen (CSS.px(5)) lösen einen TypeError aus.
Keine automatische Aktualisierung: Ein CSSSkew ist nicht live mit dem Element verbunden. Nach jeder Änderung von ax muss die CSSTransformValue erneut per attributeStyleMap.set() gesetzt werden.
Serialisierung: Ist ay genau 0, lässt toString() den zweiten Wert weg und gibt z. B. nur skew(10deg) aus.
Berechnete Styles: element.computedStyleMap().get('transform') gibt oft eine CSSMatrixComponent zurück statt eines CSSSkew. ax steht daher meist nur zuverlässig bei selbst angelegten Werten oder bei attributeStyleMap zur Verfügung.
Werte nahe ±90° verzerren extrem, weil der Tangens gegen unendlich geht. Sinnvolle Werte liegen meist deutlich darunter.

Siehe auch

CSSPositionValue.x CSSSkew.ay CSSSkewX.ax CSSSkewY.ay CSSScale.x