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 Konstruktor CSSRotate() erstellt ein neues CSSRotate-Objekt, das den Wert rotate() der individuellen transform-CSS-Eigenschaft darstellt.
Dies kann entweder als 2D-Drehung um einen bestimmten Winkel oder als 3D-Drehung um einen Winkel entlang einer bestimmten Achse angegeben werden.
Syntax
new CSSRotate(angle)
new CSSRotate(x, y, z, angle)
Parameter
angle-
Ein Wert für den Drehwinkel des zu erstellenden
CSSRotate-Objekts. Dieser muss einCSSNumericValuesein. xOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die x-Koordinate des Drehachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Drehung verwendet und ist dafür erforderlich; die Form mit 2 Argumenten impliziert eine Drehachse von(0, 0, 1)(der z-Achse). yOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die y-Koordinate des Drehachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Drehung verwendet und ist dafür erforderlich. zOptional-
Eine Zahl oder ein
CSSNumericValue-Wert, der die z-Koordinate des Drehachsenvektors des zu erstellendenCSSRotate-Objekts angibt. Wird nur beim Erstellen einer 3D-Drehung verwendet und ist dafür erforderlich.
Ausnahmen
Beispiele
Erstellen einer 2D-Drehung
Die Form mit 2 Argumenten akzeptiert nur einen Winkel und impliziert eine Drehung um die z-Achse (entspricht rotate3d(0, 0, 1, angle)):
const rotate2D = new CSSRotate(CSS.deg(45));
console.log(rotate2D.is2D); // true
console.log(rotate2D.toString()); // "rotate(45deg)"
Erstellen einer 3D-Drehung
Die Form mit 4 Argumenten akzeptiert die Koordinaten der Drehachse, 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)"
Umgang mit einem ungültigen Winkel
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 |