How to Rotate Image in Html

If we want to rotate an image in Html, then we have to follow the steps which are given below. Using these steps, we can easily rotate an image.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to rotate an image.

<!Doctype Html>
<Html>   

<Head>    
<Title>   
Rotate an Image
</Title>
</Head>
<Body> 
Hello User!... <br> <center>
<img src="https://www.javatpoint.com/images/logo/jtp_logo.png" width="100" height="100" > </center>
</Body> 
</Html>

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block. And, then type the different attributes in any class. The following class in CSS style tag contains the different attributes which help for rotating the image.

<Head>    
<Title>   
Rotate an Image
</Title>
<style>
.rotate90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
</style>
</Head>

Step 3: And then, we have to define the class in the <img> tag of that image which we want to rotate.

<img src="https://www.javatpoint.com/images/logo/jtp_logo.png" width="100" height="100" class="rotate90">

Step 4: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Rotate an Image
</Title>
<style>
.rotate90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
</style>
</Head>
<Body> 
Hello User!... <br> <center>
<img src="https://www.javatpoint.com/images/logo/jtp_logo.png" width="100" height="100" class="rotate90"> </center>
</Body>   
</Html>

Test it Now

The output of above Html code is shown in the following screenshot: