rotate

The rotate CSS property accepts an angle to rotate an element, and optionally an axis to rotate it around.

Syntax

CSS

rotate: value;

JS

object.style.rotate = "value";

Values

<'rotate'> = none | <angle> | [ x | y | z | <number>{3} ] && <angle>
none

No rotation.

<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

x

Rotation around the x axis.

y

Rotation around the y axis.

z

Rotation around the z axis.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

Initial

none

Examples

angle

none

number

x

y

z

JS

Internal

backface-visibility

perspective

perspective-origin

scale

transform

transform-box

transform-origin

transform-style

translate

External

World Wide Web Consortium (W3C)

Home Menu