CSSSkewY.ay — Eigenschaft · JavaScript-Referenz

Signatur

CSSSkewY.ay

Beschreibung

Die Eigenschaft ay gehört zum Interface CSSSkewY aus dem CSS Typed Object Model (Typed OM). Sie steht für den Winkel der CSS-Transformationsfunktion skewY(). Der Wert ist kein einfacher String, sondern ein typisiertes CSSNumericValue-Objekt, zum Beispiel CSSUnitValue mit der Einheit deg, rad, grad oder turn.

Die Eigenschaft lässt sich lesen und schreiben. Deshalb eignet sie sich gut für Animationen und dynamische Transformationen, bei denen man sonst Strings wie "skewY(12deg)" zusammensetzen und wieder zerlegen müsste. Nach einer Änderung von ay muss das zugehörige CSSTransformValue erneut per element.attributeStyleMap.set() auf das Element geschrieben werden. Erst dann ändert sich die Darstellung.

Beim Setzen sind nur Werte mit dem Typ Winkel erlaubt. Eine Länge wie CSS.px(10) oder eine Zahl ohne Einheit führt zu einem TypeError. Berechnete Werte wie CSSMathSum sind erlaubt, solange ihr Ergebnis ein Winkel ist, z. B. CSS.deg(10).add(CSS.rad(0.1)).

Parameter

Name	Typ	Default	Beschreibung
$wert Pflicht	CSSNumericValue		Nur beim Setzen: der neue Verzerrungswinkel. Er muss den Typ Winkel haben, z. B. `CSS.deg(20)` oder `CSS.turn(0.05)`.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der aktuelle Verzerrungswinkel entlang der y-Achse, meist ein CSSUnitValue mit value und unit (z. B. 15 und "deg").

Beispiele

Winkel lesen und ändern

const skew = new CSSSkewY(CSS.deg(10));

console.log(skew.ay.value, skew.ay.unit);

// Winkel ändern
skew.ay = CSS.deg(25);
console.log(skew.toString());

// In eine andere Einheit umrechnen
console.log(skew.ay.to('rad').value.toFixed(4));

10 "deg" skewY(25deg) 0.4363

Verzerrung eines Elements aus dem Inline-Style auslesen

const box = document.querySelector('.box');
box.style.transform = 'skewY(15deg)';

const transform = box.attributeStyleMap.get('transform');
const skewY = transform[0];

if (skewY instanceof CSSSkewY) {
  console.log(`Aktueller Winkel: ${skewY.ay}`);
}

Aktueller Winkel: 15deg

Wackel-Animation mit requestAnimationFrame

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

const animate = (time) => {
  // Winkel schwingt zwischen -8° und +8°
  skew.ay = CSS.deg(Math.sin(time / 300) * 8);
  card.attributeStyleMap.set('transform', transform);
  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);

Ungültige Werte abfangen

const skew = new CSSSkewY(CSS.deg(5));

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

console.log(skew.ay.toString());

TypeError 5deg

// Wichtig · Fallstricke

Nur Winkel erlaubt: Wird ay auf einen Wert gesetzt, der kein Winkel ist (z. B. CSS.px(), CSS.number()), wird ein TypeError ausgelöst. Der alte Wert bleibt dann erhalten.
Keine automatische Aktualisierung: Eine Änderung von ay wirkt sich nicht direkt auf das Element aus. Das CSSTransformValue muss danach wieder mit attributeStyleMap.set('transform', …) gesetzt werden.
Strings werden nicht angenommen: skew.ay = '10deg' funktioniert nicht. Verwende CSS.deg(10) oder CSSNumericValue.parse('10deg').
Extreme Winkel: Bei Werten nahe 90° (bzw. ±90° + n·180°) läuft die Verzerrung gegen unendlich, und das Element wird praktisch unsichtbar oder extrem gestreckt.
Browser-Unterstützung: Der CSS Typed OM ist in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4 verfügbar, in Firefox bisher nicht. Prüfe die Unterstützung per Feature-Erkennung mit 'CSSSkewY' in window und stelle bei Bedarf auf element.style.transform mit Strings um.

Siehe auch

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