Skip to main content

CSS rotate() Function – How to Rotate Elements in CSS

rotate() transforms an element by rotating it two-dimensionally around a fixed point.

note
  • Transform origin is the fixed point around which an element rotates.
  • You can define your element's fixed point using the CSS transform-origin property. But the default is center.

Syntax of the CSS rotate() Function​

rotate() accepts a single argument. Here is the syntax:

element {
  transform: rotate(angle);
}
info

The rotate(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotateZ(angle).

Note the following:

  • The angle argument specifies the element's angle of rotation.
  • angle can be in degrees, gradians, radians, or turns.
  • An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
  • Your browser's writing direction determines the element's direction of rotation.
  • A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative angle will do a counterclockwise rotation.
  • A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a negative angle will do a clockwise rotation.
Buy CSS Grid book

Examples of the CSS rotate() Function​

Below are some examples of how the CSS rotate() function works.

How to do a zero-degree rotation in CSS​

img {
  transform: rotate(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a zero-degree (0⁰) rotation for the image element.

How to do a 45-degree rotation in CSS​

img {
  transform: rotate(45deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a forty-five-degree (45⁰) rotation for the image element.

How to do a negative seventy-degree rotation in CSS​

img {
  transform: rotate(-70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a negative seventy-degree (70⁰) rotation for the image element.

Overview​

This article discussed what a CSS rotate() function is. We also used examples to see how it works.