CSSSkew.ay — Eigenschaft · JavaScript-Referenz

Signatur

CSSSkew.ay

Beschreibung

Die Eigenschaft ay eines CSSSkew-Objekts steht für den zweiten Winkel der CSS-Funktion skew(ax, ay), also die Verzerrung entlang der y-Achse. Der Wert ist ein CSSNumericValue mit Winkeltyp, z. B. CSS.deg(15), CSS.rad(0.3) oder CSS.turn(0.05).

CSSSkew gehört zum CSS Typed Object Model (Typed OM). Damit bearbeitet man Transformationen als typisierte Objekte statt als Zeichenketten wie "skew(10deg, 20deg)". Das ist besonders dann nützlich, wenn Winkel in Animationen oder bei Interaktionen laufend neu berechnet werden: Man ändert einfach skew.ay und schreibt den CSSTransformValue über element.attributeStyleMap.set() zurück, ohne Zeichenketten zu parsen oder zusammenzubauen.

Beim Setzen muss der neue Wert ein CSSNumericValue sein, der zu einem <angle> passt. Längen, Prozentwerte oder einfache Zahlen werden mit einem TypeError abgelehnt.

Parameter

Name	Typ	Default	Beschreibung
$value Pflicht	CSSNumericValue		Nur beim Setzen: der neue Verzerrungswinkel für die y-Achse. Er muss einen Winkeltyp haben, z. B. `CSS.deg(20)`. Auch berechnete Werte wie `CSS.deg(10).add(CSS.rad(0.1))` sind erlaubt.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der aktuelle Verzerrungswinkel entlang der y-Achse, meist als CSSUnitValue mit value und unit (z. B. 20 und "deg"), oder als CSSMathValue bei berechneten Ausdrücken.

Beispiele

CSSSkew erzeugen und ay auslesen

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

console.log(skew.ay.value); // Zahlenwert
console.log(skew.ay.unit);  // Einheit
console.log(skew.toString());

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

ay nachträglich ändern und auf ein Element anwenden

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

// y-Verzerrung setzen, auch mit einer anderen Winkeleinheit
skew.ay = CSS.rad(0.2);

card.attributeStyleMap.set('transform', new CSSTransformValue([skew]));
console.log(card.style.transform);

"skew(0deg, 0.2rad)"

Verzerrung abhängig von der Mausposition animieren

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

box.addEventListener('pointermove', (event) => {
  const rect = box.getBoundingClientRect();
  // -1 … 1 abhängig von der vertikalen Position
  const ratio = (event.clientY - rect.top) / rect.height * 2 - 1;
  skew.ay = CSS.deg(ratio * 15);
  box.attributeStyleMap.set('transform', transform);
});

box.addEventListener('pointerleave', () => {
  skew.ay = CSS.deg(0);
  box.attributeStyleMap.set('transform', transform);
});

Ungültige Werte abfangen

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

try {
  skew.ay = CSS.px(10); // Länge statt Winkel
} catch (err) {
  console.log(err.name);
}

console.log(skew.ay.toString()); // unverändert

"TypeError" "5deg"

// Wichtig · Fallstricke

Nur Winkel erlaubt: Wenn man ay eine Länge, einen Prozentwert oder eine einfache Zahl zuweist (auch CSS.number(0)), wird ein TypeError ausgelöst. Für „keine Verzerrung“ verwendet man CSS.deg(0).
Kein automatisches Neuzeichnen: Eine Änderung an skew.ay wirkt sich erst auf das Element aus, wenn der CSSTransformValue erneut per attributeStyleMap.set() zugewiesen wird.
Serialisierung: Laut Spezifikation wird der zweite Wert bei ay = 0 in toString() weggelassen (skew(10deg)). Deshalb sollte man nicht auf eine exakte Zeichenkette vergleichen.
Berechnete Styles: element.computedStyleMap().get('transform') liefert oft eine Matrix statt eines CSSSkew. Die ursprünglichen Einzelwerte bekommt man zuverlässig nur über attributeStyleMap oder selbst verwaltete Objekte.
Browser-Kompatibilität: CSS Typed OM ist in Chromium-Browsern (Chrome, Edge, Opera) und in neueren Safari-Versionen verfügbar, in Firefox dagegen nicht. Vorher prüfen, z. B. mit 'CSSSkew' in window, und sonst auf element.style.transform mit Zeichenketten ausweichen.

Siehe auch

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