Signatur
Beschreibung
Der Konstruktor CSSSkewX() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein typisiertes Objekt für die Transformationsfunktion skewX(<angle>), die ein Element entlang der X-Achse um einen bestimmten Winkel neigt. So musst du keine Strings wie "skewX(20deg)" zusammenbauen und später wieder auseinandernehmen.
Ein CSSSkewX-Objekt ist eine Unterklasse von CSSTransformComponent. Allein wird es selten genutzt: Normalerweise packst du es zusammen mit anderen Komponenten (z. B. CSSTranslate, CSSRotate) in ein CSSTransformValue und weist dieses über element.attributeStyleMap.set('transform', …) einem Element zu.
Der übergebene Winkel ist später über die Eigenschaft ax les- und schreibbar. Damit lassen sich Animationen oder interaktive Effekte umsetzen, ohne bei jedem Frame CSS-Strings neu zu parsen. Mit toMatrix() bekommst du die zugehörige DOMMatrix, und toString() liefert die CSS-Schreibweise.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $ax Pflicht | CSSNumericValue | Der Neigungswinkel entlang der X-Achse. Muss ein CSSNumericValue vom Typ Winkel sein, z. B. CSS.deg(20), CSS.rad(0.5) oder CSS.turn(0.1). Auch ein CSSMathValue wie new CSSMathSum(CSS.deg(10), CSS.deg(5)) ist erlaubt. |
Rückgabewert
CSSSkewX-Objekt mit dem Winkel in ax. is2D ist dabei immer true.Beispiele
Objekt erzeugen und als CSS-String ausgeben
const skew = new CSSSkewX(CSS.deg(20));
console.log(skew.toString());
console.log(skew.ax.value, skew.ax.unit);
console.log(skew.is2D);Transformation typisiert auf ein Element anwenden
const card = document.querySelector('.card');
// Verschieben und neigen, zusammengefasst in einem CSSTransformValue
const transform = new CSSTransformValue([
new CSSTranslate(CSS.px(10), CSS.px(0)),
new CSSSkewX(CSS.deg(-12))
]);
card.attributeStyleMap.set('transform', transform);
console.log(card.style.transform);Neigung abhängig von der Mausposition ändern
const box = document.querySelector('.box');
const skew = new CSSSkewX(CSS.deg(0));
const transform = new CSSTransformValue([skew]);
box.addEventListener('pointermove', (event) => {
const rect = box.getBoundingClientRect();
// Relative Position von -0.5 bis 0.5 → Winkel von -15° bis 15°
const ratio = (event.clientX - rect.left) / rect.width - 0.5;
skew.ax = CSS.deg(Math.round(ratio * 30));
box.attributeStyleMap.set('transform', transform);
});Ungültiger Typ und Umrechnung in eine Matrix
try {
new CSSSkewX(CSS.px(10)); // Länge statt Winkel
} catch (err) {
console.log(err.name);
}
const matrix = new CSSSkewX(CSS.deg(45)).toMatrix();
console.log(matrix.c.toFixed(3)); // tan(45°)// Wichtig · Fallstricke
- Nur Winkel sind erlaubt: Übergibst du etwas anderes als einen Winkel, z. B.
CSS.px(10)oderCSS.number(5), wird einTypeErrorausgelöst. Das gilt auch, wenn du späteraxneu setzt. Eine einfache Zahl wie20wird ebenfalls nicht akzeptiert. Nutze stattdessenCSS.deg(20). is2Dist fest: Eine Neigung ist immer eine 2D-Transformation. Das Setzen vonis2Dhat beiCSSSkewXkeine Wirkung.- Änderungen werden nicht automatisch übernommen: Wenn du
axnachträglich änderst, aktualisiert sich das Element nicht von selbst. Du musst den Wert erneut mitattributeStyleMap.set()zuweisen. - 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 bisher nicht. Prüfe die Unterstützung vorher, z. B. mit
if ('CSSSkewX' in window), und weiche sonst aufelement.style.transform = 'skewX(20deg)'aus. - Für eine Neigung auf beiden Achsen gibt es
CSSSkew, für die Y-Achse alleinCSSSkewY.