CSSRotate.angle — Eigenschaft · JavaScript-Referenz

Signatur

CSSRotate.angle

Beschreibung

Die Eigenschaft angle gehört zum Interface CSSRotate aus dem CSS Typed Object Model. Ein CSSRotate-Objekt steht für die CSS-Funktionen rotate() bzw. rotate3d(). In angle steht der Drehwinkel, und zwar nicht als String, sondern als typisiertes CSSNumericValue-Objekt, z. B. CSSUnitValue mit value: 45 und unit: "deg".

Die Eigenschaft lässt sich lesen und schreiben. Beim Schreiben muss der neue Wert ein Winkel sein, also z. B. CSS.deg(), CSS.rad(), CSS.grad() oder CSS.turn(). Auch ein zusammengesetzter Ausdruck wie CSSMathSum ist erlaubt, solange er einen Winkel ergibt. Andere Typen wie Längen oder reine Zahlen werden mit einem TypeError abgelehnt.

Typische Einsatzfälle sind Animationen und interaktive Drehungen, zum Beispiel ein Drehregler, ein Ladesymbol oder ein Kompass. Dort ändert man nur den Winkel, statt bei jedem Frame einen transform-String wie "rotate(" + x + "deg)" neu zusammenzusetzen und vom Browser parsen zu lassen. Den geänderten CSSRotate schreibt man in einem CSSTransformValue über element.attributeStyleMap.set() zurück ins Element.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen) Pflicht	CSSNumericValue		Neuer Drehwinkel. Muss vom Typ Winkel sein, z. B. `CSS.deg(90)`, `CSS.turn(0.25)` oder `CSS.rad(Math.PI)`. Andere Typen lösen einen `TypeError` aus.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der aktuelle Drehwinkel, meist ein CSSUnitValue mit den Eigenschaften value und unit. Bei berechneten Ausdrücken kann es auch ein CSSMathValue sein, z. B. CSSMathSum.

Beispiele

Winkel auslesen und in andere Einheit umrechnen

const rotation = new CSSRotate(CSS.deg(45));

console.log(rotation.angle.value);          // Zahlenwert
console.log(rotation.angle.unit);           // Einheit
console.log(rotation.angle.to('rad').value); // in Radiant umgerechnet
console.log(rotation.toString());

45 deg 0.7853981633974483 rotate(45deg)

Winkel nachträglich ändern (auch bei rotate3d)

// 3D-Drehung um die X-Achse
const flip = new CSSRotate(1, 0, 0, CSS.deg(0));

flip.angle = CSS.turn(0.5);
console.log(flip.toString());

// Winkel über CSSMathSum addieren
flip.angle = flip.angle.add(CSS.deg(10));
console.log(flip.angle.toString());

rotate3d(1, 0, 0, 0.5turn) calc(0.5turn + 10deg)

Drehendes Ladesymbol per requestAnimationFrame

const spinner = document.querySelector('.spinner');
const rotation = new CSSRotate(CSS.deg(0));
const transform = new CSSTransformValue([rotation]);

const tick = (time) => {
  // eine volle Umdrehung pro Sekunde
  rotation.angle = CSS.deg((time / 1000 * 360) % 360);
  spinner.attributeStyleMap.set('transform', transform);
  requestAnimationFrame(tick);
};

if ('CSSRotate' in window) {
  requestAnimationFrame(tick);
} else {
  spinner.classList.add('spin-fallback'); // CSS-Animation als Ersatz
}

Ungültigen Typ abfangen

const rotation = new CSSRotate(CSS.deg(30));

try {
  rotation.angle = CSS.px(30); // Länge statt Winkel
} catch (err) {
  console.log(err.name);
}

console.log(rotation.angle.toString()); // unverändert

TypeError 30deg

// Wichtig · Fallstricke

Nur Winkeltypen: Reine Zahlen (CSS.number(45), 45) oder Längen werden mit einem TypeError abgelehnt. Nutzt für Winkel immer CSS.deg(), CSS.rad(), CSS.grad() oder CSS.turn().
Keine automatische Übernahme ins Element: Wenn ihr angle ändert, ändert sich nur das JavaScript-Objekt. Damit die Änderung sichtbar wird, muss der CSSTransformValue erneut per attributeStyleMap.set('transform', …) gesetzt werden.
Gespeicherte Objekte: Das zurückgegebene CSSNumericValue hält die Einheit, in der der Wert gesetzt wurde, z. B. turn. Wer einheitlich in Grad rechnen will, wandelt mit .to('deg') um. Das klappt nicht bei calc()-Ausdrücken mit gemischten, nicht umrechenbaren Einheiten.
Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht. Prüft deshalb vorher mit 'CSSRotate' in window und haltet einen Ersatz über element.style.transform bereit.

Siehe auch

CSSMathClamp.upper CSSRotate.x CSSRotate.y CSSRotate.z CSSRule.type