How to Rotate Image in HTML?

CSS Web Development Front End Technology

Images are an important part of the web page, and they need to be rotated sometimes to make them look better or fit on a web page. Image rotation in HTML is a relatively simple process that can be completed using CSS.

The process of changing the orientation of an image from a specific angle is called image rotation. The CSS transform property is a common and easy way to rotate an image. This property is used to move, rotate, scale, and perform several kinds of transformations of elements.

Syntax

Following is the syntax to rotate image in HTML −

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

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

How to Rotate Image in HTML?

Images are a crucial part of web design, because this adds visual appeal to the website and provides information to the users. There are multiple methods to rotate an image in HTML, including CSS transform property, hover effects, and animations.

Here we will explore these methods one by one −

Using CSS Transform Property

The transform property is the most common way to rotate an image or element in CSS. The rotate() function is used to rotate an element. The rotate() function takes a degree value as its argument, which specifies the angle of rotation. For example, to rotate an image by 90 degrees, we can use the following CSS code −

.my-img {
   transform: rotate(90deg);
}

The above code will rotate the image by 90 degrees using the transform property.

Example 1

Here is a full code example to rotate an image by 90 degrees using the CSS transform property.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .my-img {
         transform: rotate(90deg);
         margin-top: 10px;
         padding: 5px;
         border: 5px solid #555;
      }
      img {
         margin-top: 5px;
         padding: 5px;
         border: 5px solid #555;
      }
   </style>
</head>
   <body>
      <h3>Normal Image</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" alt="Example Image">
      <h3>Rotated image by 90 degrees using css transform property</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Using CSS Hover Effects

To create dynamic and interactive web pages CSS hover effects are a popular way to rotate an image. In CSS, we can easily add a hover effect that rotates an image when the user hovers over it. To do this, we use the :hover pseudo-class in CSS. Here is an example −

<style>
.img:hover {
   transform: rotate(60deg);
}
</style>

In the above example, we are using the :hover pseudo-class to apply the rotation when the user hovers over the image. The transform property is used to rotate the image by 60 degrees.

Example 2

Here is a full code example to rotate an image by 60 degrees using the :hover pseudo-class.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      img{
         border: 5px solid #555;
         transition: transform 0.5s ease;
      }
      .my-img:hover {
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Hover me to rotate by 60 degrees</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Using CSS Animations

Rotating an image using CSS animation is one another way to create dynamic and interactive web pages. In CSS, we can easily add animation to the image that rotates it continuously or for a specified duration. For doing this we can use the following code.

<style>
.my-img {
   border: 5px solid #555;
   margin-top: 20px;
   animation: rotation 4s infinite linear;
}
@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}
</style>

In the above code, we are using the animation property to create a rotation animation that repeats continuously. The @keyframes rule is used to define the rotation animation. The from keyword sets the starting point of the animation, and the to keyword sets the end point.

Example 3

Here is a full code example to rotate an image in a circular way using CSS animation method.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .my-img {
         border:5px solid #555;
         margin-top:20px;
         animation: rotation 4s infinite linear;
      }
      @keyframes rotation {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
   <body>
      <h3>To rotate an image in a circular way using CSS</h3>
      <img src="/images/html.gif" class="my-img"></div>
   </body>
</html>

Conclusion

Rotating images using HTML is a great way to add visual interest to the web pages. With these above examples, we can see how easy it is to rotate an image using different methods such as degrees, hover effects, and animations.

Shabaz Alam

Updated on: 10-Apr-2023

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started