new CSSSkew() — Methode · JavaScript-Referenz

Signatur

new CSSSkew(ax, ay)

Beschreibung

Der Konstruktor new CSSSkew() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein typisiertes Objekt für die Transformationsfunktion skew(ax, ay) der Eigenschaft transform. Die Winkel liegen dabei nicht als Zeichenkette vor, sondern als CSSNumericValue-Objekte, zum Beispiel CSS.deg(15).

Ein CSSSkew steht nicht allein. Man packt es zusammen mit anderen Transformationskomponenten wie CSSRotate, CSSTranslate oder CSSScale in ein CSSTransformValue und setzt dieses über element.attributeStyleMap.set('transform', …). So entfällt das fehleranfällige Zusammensetzen und Zerlegen von Zeichenketten. Das ist besonders bei Animationen praktisch, in denen man Winkel oft ändert.

Nach dem Erzeugen kann man die Winkel über die Eigenschaften ax und ay lesen und ändern. toMatrix() gibt die zugehörige DOMMatrix zurück. is2D ist immer true, weil skew() eine reine 2D-Transformation ist.

Parameter

Name	Typ	Default	Beschreibung
$ax Pflicht	CSSNumericValue		Scherwinkel entlang der x-Achse. Muss ein Winkel sein, z. B. `CSS.deg(20)`, `CSS.rad(0.3)` oder `CSS.turn(0.05)`.
$ay Pflicht	CSSNumericValue		Scherwinkel entlang der y-Achse, ebenfalls als Winkelwert. Für keine Scherung in y-Richtung `CSS.deg(0)` übergeben.

Rückgabewert

Typ

CSSSkew

Beschreibung

Ein neues CSSSkew-Objekt mit den Eigenschaften ax, ay und is2D sowie der Methode toMatrix().

Beispiele

CSSSkew erzeugen und serialisieren

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

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

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

Scherung auf ein Element anwenden

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

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

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

translate(20px, 0px) skew(-8deg, 4deg)

Winkel bei Mausbewegung anpassen

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();
  const x = (event.clientX - rect.left) / rect.width - 0.5;
  const y = (event.clientY - rect.top) / rect.height - 0.5;
  // Winkel direkt am Objekt ändern, ohne Strings zu bauen
  skew.ax = CSS.deg(x * 20);
  skew.ay = CSS.deg(y * 20);
  box.attributeStyleMap.set('transform', transform);
});

Ungültige Einheit abfangen

try {
  new CSSSkew(CSS.px(10), CSS.deg(0));
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Nur Winkel sind erlaubt: Wenn ax oder ay kein Winkel ist (z. B. CSS.px() oder CSS.number()), wirft der Konstruktor einen TypeError. Dasselbe passiert, wenn man später einen solchen Wert an ax oder ay zuweist.
Beide Argumente sind Pflicht: Anders als bei der CSS-Funktion skew(ax) lässt sich ay nicht weglassen. Für eine Scherung nur in eine Richtung gibt es CSSSkewX und CSSSkewY.
is2D ist schreibgeschützt: Die Eigenschaft ist immer true. Wenn man ihr einen Wert zuweist, passiert nichts.
Änderungen erscheinen nicht automatisch: Ändert man ax oder ay nachträglich, muss man das CSSTransformValue erneut mit attributeStyleMap.set() setzen.
Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht. Vor der Nutzung prüfen, z. B. mit 'CSSSkew' in window, und sonst auf element.style.transform = 'skew(…)' ausweichen.

Siehe auch

new CSSSkewX() new CSSSkewY() new CSSScale() new Worker() new CSSRotate()