new CSSSkewY() — Methode · JavaScript-Referenz

Signatur

new CSSSkewY(ay)

Beschreibung

Der Konstruktor CSSSkewY() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein Objekt, das eine vertikale Scherung um den Winkel ay darstellt. Das entspricht der CSS-Funktion skewY(<angle>). Mit dem Objekt kannst du Transformationen typsicher per Code aufbauen und musst dafür keine Strings zusammensetzen und parsen.

Einzeln setzt man ein CSSSkewY-Objekt meist nicht. Üblicherweise kommt es als Bestandteil in einen CSSTransformValue, und dieser wird dann über element.attributeStyleMap.set('transform', …) an ein Element übergeben. So lassen sich mehrere Transformationen kombinieren, etwa CSSTranslate, CSSRotate und CSSSkewY.

Der Winkel muss ein CSSNumericValue vom Typ Winkel sein, also z. B. CSS.deg(10), CSS.rad(0.5) oder CSS.turn(0.1). Das Objekt hat die Eigenschaft ay (lesen und schreiben) und die geerbte Eigenschaft is2D, die bei Scherungen immer true ist. Außerdem stehen die Methoden toMatrix() und toString() zur Verfügung.

Parameter

Name	Typ	Default	Beschreibung
$ay Pflicht	CSSNumericValue		Scherwinkel entlang der y-Achse. Muss ein Winkel sein, z. B. `CSS.deg(20)` oder `new CSSUnitValue(0.3, 'rad')`. Positive Werte scheren nach unten.

Rückgabewert

Typ

CSSSkewY

Beschreibung

Ein neues CSSSkewY-Objekt, das skewY(ay) darstellt.

Beispiele

Objekt erzeugen und serialisieren

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

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

15 "deg" true skewY(15deg)

Scherung per attributeStyleMap auf ein Element anwenden

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

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

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

translate(20px, 0px) skewY(-8deg)

Winkel nachträglich ändern (einfache Animation)

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

let angle = 0;
const tick = () => {
  angle = (angle + 1) % 30;
  skew.ay = CSS.deg(angle);
  box.attributeStyleMap.set('transform', value);
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Matrix berechnen und Typfehler abfangen

const m = new CSSSkewY(CSS.deg(45)).toMatrix();
console.log(m.b.toFixed(3)); // tan(45°)

try {
  new CSSSkewY(CSS.px(10)); // keine Winkeleinheit
} catch (err) {
  console.log(err.name);
}

1.000 TypeError

// Wichtig · Fallstricke

TypeError: Wenn ay kein Winkel ist (z. B. CSS.px(10) oder eine Zahl ohne Einheit), wirft der Konstruktor einen TypeError. Das gilt auch, wenn du später einen ungültigen Wert an ay zuweist.
is2D: Bei CSSSkewY ist is2D immer true. Wenn du diese Eigenschaft setzt, passiert nichts.
Kein direktes Setzen: Ein einzelnes CSSSkewY-Objekt kann nicht direkt an transform übergeben werden. Es muss in einem CSSTransformValue stecken.
Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) und in neueren Safari-Versionen. Firefox unterstützt die Schnittstelle nicht. Prüfe deshalb vorher mit if ('CSSSkewY' in window) und greif sonst auf element.style.transform = 'skewY(10deg)' zurück.
Bei Winkeln nahe ±90° geht tan() gegen unendlich. Die Matrix wird dann extrem verzerrt, das Element ist praktisch nicht mehr sichtbar.

Siehe auch

new CSSSkew() new CSSSkewX() new CSSScale() new CSSRotate() new Comment()