rotate

Example

Change rotation of an element:

div {
rotate: 30deg;
}

Definition rotate

The rotate property allows you to rotate elements.

The rotate property defines a value for how much an element is rotated clockwise around z-axis. To rotate an element around x-axis or y-axis or in other ways, this must be defined.

Values for rotate property can be given as one angle, axis name + angle, or three values + angle.

If an angle is given, the element is rotated clockwise around z-axis.
If axis name + angle is given, the element is rotated clockwise around that given axis.
If three values are given + angle, the three values define a vector which the element is rotated around.

To better understand the rotate property, view a demo.

Note: An alternative technique to rotate an element is to use CSS transform property with CSS rotate() function. The CSS rotate property, as explained on this webpage, is arguably a simpler and more direct way to scale an element.

Show demo ❯

Default value:	none
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.rotate="-120deg" Try it

Browser Support rotate

The numbers in the table specify the first browser version that fully supports the property.

Property
rotate	104	104	72	14.1	90

CSS Syntax rotate

rotate: axis angle|initial|inherit;

Property Values rotate

Property Value	Description	Demo
axis	Optional. If not set, z-axis is default. Defines axis to rotate element around. Possible values: x y z	Demo ❯
angle	Defines how much an element is rotated. Possible units: deg rad turn	Demo ❯
vector angle	Three numbers define a vector for the element to be rotated around. The numbers are x-, y- and z-coordinates for the vector, respectively. The last value is the angle for how much to rotate. Possible values: number number number angle	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples rotate

Example

When rotate property is set with vector and angle, the element is rotated around that vector. Here, the vector is [1 1 0] in 2D plane with x- and y-coordinates, and then rotated 60 degrees:

div {
rotate: 1 1 0 60deg;
}

Try it Yourself »