CSSSkewY — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSSkewY extends CSSTransformComponent

Beschreibung

CSSSkewY gehört zur CSS Typed Object Model API (Houdini) und steht für eine einzelne skewY()-Transformationsfunktion, also eine Scherung entlang der Y-Achse. Die Schnittstelle erbt von CSSTransformComponent und wird meist als Bestandteil einer CSSTransformValue verwendet, die die komplette Liste der Funktionen einer transform-Deklaration enthält.

Statt Zeichenketten wie "skewY(15deg)" zusammenzusetzen und zu parsen, arbeitest du mit echten Objekten: Die Eigenschaft ay ist ein CSSNumericValue vom Typ Winkel (z. B. CSS.deg(15), CSS.rad(0.3) oder CSS.turn(0.05)). Das ist besonders praktisch für Animationen per JavaScript, weil sich Werte direkt lesen, verändern und über element.attributeStyleMap zurückschreiben lassen.

Wichtige Mitglieder:

new CSSSkewY(ay) – erzeugt ein neues Objekt; ay muss ein Winkel sein.
ay – lesbarer und schreibbarer Winkel der Scherung.
Geerbt: is2D (bei Scherungen immer true), toMatrix() liefert eine DOMMatrix, toString() die CSS-Schreibweise.

Parameter

Name	Typ	Default	Beschreibung
$ay Pflicht	CSSNumericValue		Scherwinkel entlang der Y-Achse, z. B. `CSS.deg(20)`. Muss den Typ angle haben, sonst wird ein `TypeError` geworfen.

Rückgabewert

Typ

CSSSkewY

Beschreibung

Ein neues CSSSkewY-Objekt (beim Konstruktoraufruf), das als Bestandteil einer CSSTransformValue genutzt werden kann.

Beispiele

Objekt erzeugen und untersuchen

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

console.log(skew.toString());   // CSS-Schreibweise
console.log(skew.ay.value, skew.ay.unit);
console.log(skew.is2D);

// Matrix-Darstellung: b = tan(20°)
const m = skew.toMatrix();
console.log(m.b.toFixed(3));

skewY(20deg) 20 "deg" true 0.364

Scherung per attributeStyleMap auf ein Element anwenden

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

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

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

translate(0px, -10px) skewY(-5deg)

Winkel in einer Animationsschleife ändern

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

const animate = (time) => {
  // sanftes Hin- und Herscheren zwischen -15° und 15°
  skew.ay = CSS.deg(Math.sin(time / 500) * 15);
  box.attributeStyleMap.set('transform', transform);
  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);

Vorhandenen skewY()-Wert auslesen

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

const value = el.attributeStyleMap.get('transform');
const skewPart = [...value].find((c) => c instanceof CSSSkewY);

console.log(skewPart?.ay.to('rad').value.toFixed(4));

0.2094

// Wichtig · Fallstricke

Browser-Unterstützung: Die CSS Typed OM gibt es in Chromium-basierten Browsern (ab 66) und in Safari ab 16.4. Firefox unterstützt sie nicht. Prüfe vorab mit if ('CSSSkewY' in window) und greife sonst auf element.style.transform = 'skewY(…)' zurück.
Nur Winkel erlaubt: new CSSSkewY(CSS.px(10)) oder eine reine Zahl wirft einen TypeError. Das gilt auch, wenn du später einen ungültigen Wert an ay zuweist.
Nicht die Eigenschaft skew: Anders als bei rotate, scale und translate gibt es keine eigene CSS-Eigenschaft für Scherungen. CSSSkewY kommt deshalb immer innerhalb von transform vor.
Extreme Winkel: Bei ±90° wird tan(ay) unendlich groß, das Element wird dann praktisch unsichtbar oder verzerrt.
is2D ist bei CSSSkewY immer true. Das Setzen auf false hat keine Wirkung.
Für Scherungen auf beiden Achsen gleichzeitig verwendest du CSSSkew, für die X-Achse CSSSkewX.

Siehe auch

CSSSkew CSSSkewX CSSScale CSS CSSRule