CSSRotate: CSSRotate() constructor

Syntax

new CSSRotate(angle)
new CSSRotate(x, y, z, angle)

Parameters

angle

A value for the angle of rotation of the CSSRotate object to be constructed. This must be a CSSNumericValue.

x Optional

A number or CSSNumericValue value indicating the x-coordinate of the rotation axis vector of the CSSRotate object to be constructed. Only used, and required, when constructing a 3D rotation; the 2-argument form implies a rotation axis of (0, 0, 1) (the z-axis).

y Optional

A number or CSSNumericValue value indicating the y-coordinate of the rotation axis vector of the CSSRotate object to be constructed. Only used, and required, when constructing a 3D rotation.

z Optional

A number or CSSNumericValue value indicating the z-coordinate of the rotation axis vector of the CSSRotate object to be constructed. Only used, and required, when constructing a 3D rotation.

Exceptions

TypeError

Raised if the value of the angle property is not an <angle> value or CSSRotate.x, CSSRotate.y, CSSRotate.z are not <number> values.

Examples

Constructing a 2D rotation

The 2-argument form takes only an angle, and implies a rotation around the z-axis (equivalent to rotate3d(0, 0, 1, angle)):

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

console.log(rotate2D.is2D); // true
console.log(rotate2D.toString()); // "rotate(45deg)"

Constructing a 3D rotation

The 4-argument form takes the rotation axis coordinates followed by the angle:

const rotate3D = new CSSRotate(1, 1, 0, CSS.deg(45));

console.log(rotate3D.is2D); // false
console.log(rotate3D.toString()); // "rotate3d(1, 1, 0,45deg)"

Handling an invalid angle

try {
  const rotate = new CSSRotate(CSS.px(45));
} catch (e) {
  console.log(e); // TypeError: px is not an angle
}

Specifications

Browser compatibility

See also

• CSSRotate.angle
• CSSRotate.x
• CSSRotate.y
• CSSRotate.z
• CSSTransformComponent
• Using the CSS Typed OM
• CSS Typed Object Model API