CSS rotate property

Previous Page Right
Next Page row-gap

Definition and Usage

rotate The attribute allows you to rotate the element.

rotate The attribute defines a value representing the degree of clockwise rotation of the element around the z-axis. To rotate the element around the x-axis, y-axis, or in other ways, a corresponding definition must be made.

rotate The value of the attribute can be an angle, axis name + angle, or three values + angle.

If only one angle is given, the element will rotate clockwise around the z-axis.
If axis name + angle is given, the element will rotate clockwise around the specified axis.
If three values + angle are given, these three values define a vector, around which the element will rotate.

To better understand rotate attribute, please seeDemonstration.

Note:Another technique to rotate an element is to use the CSS rotate() function of the CSS transform attribute.

Example

Example 1

Change the rotation of the element:

div {
  rotate: 30deg;
}

Try It Yourself

Example 2

when rotate When the attribute is set to a vector and angle, the element will rotate around the vector.

Here, the vector is [1 1 0] in the two-dimensional plane, with x and y coordinates, and then rotated 60 degrees:

div {
  rotate: 1 1 0 60deg;
}

Try It Yourself

CSS Syntax

rotate: axis angle|initial|inherit;

Attribute Value

Value	Description
axis	Optional. If not set, the default value is the z-axis. Defines the axis around which the element rotates. Possible values: x y z
angle	Define the degree of rotation of the element. Possible units: deg（degrees） rad（radians） turn（circle）
vector angle	These three numbers define a vector, around which the element will rotate. These three numbers are the x, y, and z coordinates of the vector. The last value is the rotation angle. Possible Values: number number number angle
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	none
Inheritance:	No
Animation Production:	Supported. See:Animation-Related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.rotate="-120deg"