CSS rotate() Function

Definition and Usage

CSS rotate() 2D rotation of the function definition element in CSS.

rotate() Function in transform Used in the attribute.

Example

Example 1

Using rotate() Rotate Multiple <div> Elements:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

Try It Yourself

Example 2

Using rotate() Rotate Image:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

Try It Yourself

CSS Syntax

rotate(angle)
Value Description
angle

Required. Specify the rotation angle. Possible units:

  • deg (degree)
  • rad (radian)
  • turn (circle)

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

The numbers in the table represent the first browser version that fully supports this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related Pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS rotate property

Reference:CSS rotate3d() function

Reference:CSS rotateX() Function

Reference:CSS rotateY() function

Reference:CSS rotateZ() function