How to rotate an element using CSS?

CSS Front End Technology Web Development

CSS or Cascading Style Sheets, is a powerful tool to control the visual presentation of a website. CSS has many properties and effects to control the visual presentation of a web page; one of the most common visual effects is the ability to rotate an element, such as an image or a block of text.

Syntax

<style>
   transform: rotate(angle);
</style>

Here "angle" is the amount of rotation to apply to the element, specified in degrees.

What is the rotation in CSS?

In CSS (Cascading Style Sheets), the "rotate" property is used to rotate an element, such as an image or a block of text, around its center point or a selected point. The "rotate" property is part of the "transform" property, which allows us to apply various transformations to an element.

The "rotate" property takes an angle value in degrees as its parameter, which specifies the amount of rotation to apply to the element. Positive values rotate the element clockwise, and negative values rotate it anti-clockwise.

Step to rotate an element using CSS

To rotate an element using CSS, we can use the following steps −

First, we select the element we want to rotate using CSS selectors.
Then, we Apply the "transform" property to the selected element.
Finally, we use the "rotate" function as a value for the "transform" property.

Here, we will discuss how to rotate an element using CSS, including the different methods and properties with examples.

Approach 1: Using the "transform" property

The "transform" property is a most common way to rotate an element in CSS. This property allows the element to apply various transformations to the HTML element, including rotation. To rotate an element, the rotate() function is used, which takes an angle value in degrees as its parameter.

For example, to rotate an image by 45 degrees, we use the following CSS code −

img {
   transform: rotate(45deg);
}

This code will rotate the image by 45 degrees.

Example

Here is the full code example to rotate an image by 45 degrees.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      img {
         transform: rotate(45deg);
         margin-top:40px;
         padding:10px;
      }
   </style>
</head>
   <body>
      <h3>To rotate an image by 45 degrees</h3><br>
      <img src="/html/images/test.png" alt="Example Image">
   </body>
</html>

Approach 2: Using the "transform-origin" property

The origin of rotation can be changed using the transform-origin property. This property allows to specify a point around which the element should be rotated.

For example, to rotate an image around its bottom-left corner, we can use the following CSS code −

my-img {
   transform-origin: bottom left;
   transform: rotate(60deg);
}

This code will rotate the image by 60 degrees around its bottom-left corner.

Example

Here is the full code example to rotate an image by 60 degrees by using the "transform-origin" property.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .my-img {
         transform-origin: bottom left;
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Before Rotation</h3><br>
      <img src="/html/images/test.png" alt="Example Image">
      <h3>After rotation</h3>
      <img class="my-img" src="/html/images/test.png" alt="Example Image">
   </body>
</html>

Approach 3: Using the "transition" property

To add a smooth animation effect to the rotation, we can use the "transition" property. The "transition" property allows to specify the duration and timing function of a CSS property, including the "transform" property.

For example, to add a smooth rotation animation to an image when hovering over the image, we can use the following CSS code −

img {
   transition: transform 0.5s ease;
}
img:hover {
   transform: rotate(45deg);
}

This code will rotate the image by 45 degrees with a smooth animation when the user hovers over it.

Example

Here is the full code example to rotate an image by 45 degrees by using the "transition" property.

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
      img {
         transition: transform 0.5s ease;
      }
      img:hover {
         transform: rotate(45deg);
      }
   </style>
   <body>
      <h1>Using the "transition" property</h1>
      <p>The Image will rotate by 45 degrees when the mouse hovers over it</p>
      <img src="/html/images/test.png" alt="Example Image" />
   </body>
</html>

Conclusion

Here, we have discussed how to rotate an element using CSS. We looked at the rotate() function, the transform property, transform-origin, and the transition property, and provided examples of how to rotate elements. Finally, rotating an element using CSS is a simple and effective way to add visual interest and interactivity to the website.

Shabaz Alam

Updated on: 10-Apr-2023

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started