How To Rotate Image In CSS?

We can rotate and image between 0 and 360 clockwise and even use negative values to rotate and image anti-clockwise.

The syntax to rotate that is widely supported by the browser is as follows

img {
  transform: rotate(90deg);
}

transform: rotate(<angle>) is for making elements move around a fixed point. By default, it rotates around the center of the element.

Most commonly developers use the unit, deg (degree) to define the angle. Apart from deg, angle of rotation accepts other units as well like, grad, rad, and turn however deg is most widely used. Read more on MDN

Let’s see image rotation in action

We start by defining the image element

<img
  width='150px'
  height='50px'
  style='margin: 50px 0;'
  src='/example/open.png'
/>

I added top and bottom maring of 50px so that our image do not bump into text on rotation.

Result

Next, we add the transform property to image element and set its value to rotate(90deg) as follows

<img
  width='150px'
  height='50px'
  style='margin: 50px 0; transform: rotate(90deg)'
  src='/example/open.png'
/>

Result

Isn’t that easy?

Rotating image anti-clockwise

To rotate, image anti-clockwise we just need to add minus ”-” sign in front of the angle as follows - here were are rotating image minus 45 degrees(anti-clockwise)

<img
  width='150px'
  height='50px'
  style='margin: 50px 0; transform: rotate(-45deg)'
  src='/example/open.png'
/>

Common use case of image rotation

• Close button rotation for mobile menus and modal boxes
• Rotating social icons on the website displayed along with an article or beneath the article
• Mirror effect

There is a new rotate property that can be used independently of transform property, however, as of writing, the support is limited to Firefox browser only - Read More