HomeTutorsContact
CSS
How To Rotate Image In CSS?
Gulshan Saini
May 17, 2020
1 min

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

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

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

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)

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

Tip: Rotation can be mixed with CSS animations to create some cool effects.

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


Tags

#css
Previous Article
How To Use Flex Wrap(flex-wrap) In CSS?

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media