Rotate an element by an angle with CSS rotation Property

Hello Coders, today we are going to learn about rotating an element by an angle using the CSS rotation property.

What is Rotate() function?

The rotate() function rotates any element which you want to rotate by the angle you provide. You can choose any degree starting from 0 to 360 and your element will be rotated to the angle you choose. Let’s check an example to understand better how to use it.

Rotating An Element By An Angle

We will take an element called sleep and rotate it by 45 degrees below is the code.

You can also use Grad, Turns, and Radians.

You can even use negative values for the angle if you want. Using negative values will rotate the element in the anti-clockwise direction.

The syntax is transform : rotate(value)

  .sleep{
    transform: rotate(45deg);
  }

Now this will rotate your element by the desired angle.

So, guys, this is how you can rotate an element by any desired angle. Go ahead and try it yourself.

Also read: How to rotate an image on mouse hover using CSS