Signatur
Beschreibung
Die Eigenschaft ax gehört zur Schnittstelle CSSSkewX aus dem CSS Typed Object Model. Sie steht für den Winkel der CSS-Transformationsfunktion skewX(). Ihr Wert ist ein CSSNumericValue, meist ein CSSUnitValue mit einer Winkeleinheit wie deg, rad, grad oder turn.
Mit ax änderst du die Verzerrung einer Transformation typisiert. Du musst also keine Zeichenketten wie "skewX(15deg)" zusammenbauen und wieder zerlegen. Das lohnt sich vor allem bei Animationen und interaktiven Effekten: Du passt den Winkel an, schreibst den CSSTransformValue über attributeStyleMap.set() zurück, und der Browser muss keinen CSS-Text parsen.
Beim Schreiben prüft der Browser den Typ. Erlaubt ist nur ein CSSNumericValue, der zu einem Winkel passt. Das gilt auch für Rechenausdrücke wie CSSMathSum aus Winkeln. Längen, Prozentwerte oder einfache Zahlen lösen einen TypeError aus.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value (Setter) Pflicht | CSSNumericValue | Neuer Verzerrungswinkel, z. B. CSS.deg(20) oder CSS.rad(0.5). Der Wert muss ein Winkel sein. |
Rückgabewert
CSSUnitValue mit value und unit (z. B. 20 und "deg").Beispiele
Winkel lesen, ändern und umrechnen
const skew = new CSSSkewX(CSS.deg(20));
console.log(skew.ax.value, skew.ax.unit);
// Winkel in Radiant umrechnen
console.log(skew.ax.to('rad').value.toFixed(3));
// Neuen Winkel setzen
skew.ax = CSS.turn(0.05);
console.log(skew.toString());Verzerrung auf ein Element anwenden und animieren
const box = document.querySelector('.box');
const skew = new CSSSkewX(CSS.deg(0));
const transform = new CSSTransformValue([skew]);
let start;
const animate = (time) => {
start ??= time;
const t = (time - start) / 1000;
// Winkel pendelt zwischen -15° und +15°
skew.ax = CSS.deg(Math.sin(t * 2) * 15);
box.attributeStyleMap.set('transform', transform);
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);Bestehende Transformation auslesen und anpassen
const el = document.querySelector('.card');
el.style.transform = 'translateX(10px) skewX(12deg)';
const value = el.attributeStyleMap.get('transform');
for (const part of value) {
if (part instanceof CSSSkewX) {
console.log('Vorher:', part.ax.toString());
part.ax = CSS.deg(part.ax.to('deg').value * 2);
}
}
el.attributeStyleMap.set('transform', value);
console.log(el.style.transform);Ungültiger Typ löst TypeError aus
const skew = new CSSSkewX(CSS.deg(10));
try {
skew.ax = CSS.px(10); // Länge statt Winkel
} catch (err) {
console.log(err.name);
}
console.log(skew.ax.toString());// Wichtig · Fallstricke
- Typprüfung: Der Setter nimmt nur Winkel an.
CSS.px(),CSS.percent()oder eine einfache Zahl (skew.ax = 20) lösen einenTypeErroraus, und der alte Wert bleibt erhalten. - Keine automatische Aktualisierung: Wenn du
axänderst, ändert sich nur das JavaScript-Objekt. Damit die Änderung sichtbar wird, musst du denCSSTransformValueerneut mitelement.attributeStyleMap.set('transform', …)zuweisen. - Berechnete Werte:
computedStyleMap().get('transform')liefert je nach Browser oft eine Matrix statt einzelner Funktionen. EinenCSSSkewXbekommst du zuverlässig überattributeStyleMap(Inline-Stil). - Grenzwerte: Bei Winkeln nahe ±90° geht die Verzerrung gegen unendlich, und das Element wird praktisch unsichtbar oder extrem gestreckt.
- Kompatibilität: CSS Typed OM gibt es in Chromium-Browsern (Chrome und Edge ab Version 79, Opera) und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Unterstützung vorher, z. B. mit
'CSSSkewX' in window.