How to rotate an image in HTML?

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

The process of changing the direction of an image from a specific angle is called image rotation. The CSS transform property is a common and simple way to rotate an image. This property is used to move, rotate, scale, and perform various element transformations.

grammar

The following is the syntax for rotating an image in HTML -

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

How to rotate an image in HTML?

Images are an important part of web design because they add to the visual appeal of a website and provide information to users. There are many ways to rotate images in HTML, including the CSS transform property, hover effects, and animations.

Here we will discuss these methods one by one -

Using CSS transform properties

The transform attribute is the most commonly used method of rotating images or elements in CSS. The rotate() function is used to rotate elements. The rotate() function takes a degree value as a parameter to specify the angle of rotation. For example, to rotate an image 90 degrees, we can use the following CSS code −

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

The above code will use the transform attribute to rotate the image 90 degrees.

Example 1

The following is a complete code example of using the CSS transform property to rotate an image 90 degrees.

   


   
      
Normal Image
      
      
Rotated image by 90 degrees using css transform property
      
   

Use CSS hover effects

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

In the example above, we use the :hover pseudo-class to apply a rotation effect when the user hovers over the image. Use the transform property to rotate the image 60 degrees.

Example 2

The following is a complete code example using the :hover pseudo-class to rotate an image 60 degrees.

   


   
      
Hover me to rotate by 60 degrees
      
   

Using CSS Animation

Using CSS animation to rotate images is another way to create dynamic and interactive web pages. In CSS we can easily add animation to an image so that it rotates continuously or rotates for a specified duration. For this we can use the following code.

In the above code, we use the animation attribute to create a continuously repeating rotation animation. @keyframes rules are used to define rotation animations. The from keyword sets the starting point of the animation, and the to keyword sets the end point.

Example 3

This is a complete code example of using CSS animation methods to rotate an image in a loop.

   


   
      
To rotate an image in a circular way using CSS