CSSRotate: CSSRotate()-Konstruktor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Der CSSRotate()-Konstruktor erstellt ein neues CSSRotate-Objekt, das den rotate()-Wert der individuellen CSS-Eigenschaft transform repräsentiert.
Die Rotation kann entweder als 2D-Rotation um einen bestimmten Winkel oder als 3D-Rotation um eine bestimmte Achse angegeben werden.
Syntax
new CSSRotate(angle)
new CSSRotate(x, y, z, angle)
Parameter
angle-
Der Rotationswinkel des zu erstellenden
CSSRotate-Objekts. Der Wert muss einCSSNumericValuesein. xOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die x-Koordinate des Rotationsachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Rotation verwendet und ist dafür erforderlich; die Form mit zwei Argumenten setzt eine Rotationsachse von(0, 0, 1)(die z-Achse) voraus. yOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die y-Koordinate des Rotationsachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Rotation verwendet und ist dafür erforderlich. zOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die z-Koordinate des Rotationsachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Rotation verwendet und ist dafür erforderlich.
Ausnahmen
Beispiele
Eine 2D-Rotation erstellen
Die Form mit zwei Argumenten verwendet nur einen Winkel und setzt eine Rotation um die z-Achse voraus (entspricht rotate3d(0, 0, 1, angle)):
const rotate2D = new CSSRotate(CSS.deg(45));
console.log(rotate2D.is2D); // true
console.log(rotate2D.toString()); // "rotate(45deg)"
Eine 3D-Rotation erstellen
Die Form mit vier Argumenten verwendet die Koordinaten der Rotationsachse, gefolgt vom Winkel:
const rotate3D = new CSSRotate(1, 1, 0, CSS.deg(45));
console.log(rotate3D.is2D); // false
console.log(rotate3D.toString()); // "rotate3d(1, 1, 0,45deg)"
Einen ungültigen Winkel behandeln
try {
const rotate = new CSSRotate(CSS.px(45));
} catch (e) {
console.log(e); // TypeError: px is not an angle
}
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # dom-cssrotate-cssrotate |
| CSS Typed OM Level 1 # dom-cssrotate-cssrotate-x-y-z-angle |