How to rotate image with a simple click of a button using javascript

In this article, you will learn how to rotate an image with a simple click of a button using javascript.

How to rotate an image in JavaScript. #

To rotate an image using JavaScript, we can use the CSS transform property with its value rotate() function. Let's see an example.

<img src="https://app.3schools.in/logo.png" alt="logo">
<button onclick="rotateImg()">Rotate Image</button>
 <script>
 function rotateImg(){
   document.querySelector('img').style.transform="rotate(90deg)"
 }
</script>

1. In the above example, we have created an img element and included the image path to the src attribute.
   

   <img src="https://app.3schools.in/logo.png" alt="logo">

2. We have also a <button> element with the onclick attribute and set its value to rotateImg(). So, whenever someone clicks this button, the rotateImg() function gets involved.
   

   <button onclick="rotateImg()">Rotate Image</button>

3. Now inside the <script> tag, we have created the rotateImg() function.
   

   <script>
    function rotateImg(){
      
    }
   </script>

4. First, we have selected the <img> element using the querySelector() method. So that we can access its properties and methods.
5. Then, we have changed its style.
   

   document.querySelector('img').style.transform="rotate(90deg)"

To rotate image clockwise, pass positive value to the rotate() function as a parameter.

img{
 transform: rotate(90deg)
}

Pass negative values (-90deg) to the rotate() function to rotate images anticlockwise using JavaScript.

img{
 transform: rotate(-90deg)
}

Click on image to rotate. #

In this example, we will write a javascript program where the image will rotate 90 degrees after clicking on this image.

<img onclick="rotateImg()" src="https://app.3schools.in/logo.png" id="logo">
<script>
 function rotateImg(){
   document.querySelector('img').style.transform="rotate(90deg)"
 }
</script>

Rotate an image with animation using js. #

In this example, we will take a look at how to rotate an image 360 degrees after clicking on it with animation.

How to rotate images using CSS. #

To rotate images using CSS, the css rotate() function of the transform property is used.

Syntax #

img{transform: rotate(90deg)}