2 Simple Ways to Dynamically Rotate Images Using JavaScript

Last updated: 21st June 2025

The CSS transform property is a powerful tool for rotating elements on a webpage. In this tutorial, you’ll learn how to rotate an image using JavaScript by applying the transform property dynamically. This guide covers two simple methods to help you implement smooth image rotation with ease.

Syntax "transform"

transform: rotate(angle)

The transform property uses different values to perform different tasks like rotating, skewing, scaling, translating and moving etc. Some of its common values are rotate, scale, translate, skew and matrix.

In this example, I’ll demonstrate how to rotate an image using the rotate() function along with the transform property directly within JavaScript.

💡Do you know you can use rotate property instead of rotate() method (to rotate an image) in JavaScript? Check this out.

The rotate() method takes a parameter in form of an angle, like, 90deg, 180deg etc (no spaces between 90deg).

There are two effective ways to apply the transform property to an image using JavaScript.

1) First Method

In the first method I am assigning the "rotate()" method, with an angle, directly to the "transform" property. In-addition, I am using the image’s onclick event to call a function.

<body>
    <img src="https://www.encodedna.com/images/theme/easy-image-resizer.jpg" id="myimage" 
        onclick="rotateImage();" alt="" />
</body>

<script>
  const rotateImage = () => {
    const img = document.getElementById('myimage');
    if (img) {      // check if the image element exists.
      img.style.transform = 'rotate(180deg)';
    }
  };
</script>

Try it

Rotate the Image Continuously on Button Click

If you want the image to keep rotating, like a spinning animation, or rotate each time a button is clicked, here's how you can make the rotation dynamic and cumulative.

<script>
  let angle = 0;

  const rotateImage = () => {
    const img = document.getElementById('myimage');
    if (img) {
      angle = (angle + 90) % 360;   // rotates 90 degrees with each click
      img.style.transform = `rotate(${angle}deg)`;
    }
  };
</script>

Try it

2) Second Method

In this method, I have a CSS class called ".element" defined inside the <style> section. The class has the transform property set with a default rotate value. I’ll simply assign the class to the image dynamically inside the JavaScript code.

<head>
    <style>
        .element {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <h2>Click on the image to rotate it 90 degrees clock wise.</h2>

    <img src="../../images/theme/javascript.png" id="myimage" 
        onclick="rotateImage();" alt="" />
</body>
<script>
    const rotateImage = () => {
        let img = document.getElementById('myimage');
        img.className = 'element';
    }
</script>
</html>

Try it

There are several ways to dynamically rotate or manipulate images using JavaScript. The methods I’ve shared in this guide are simple, effective, and have worked well for me. While you can also use jQuery to simplify the process even further, I personally prefer the straightforward approach using plain JavaScript.

Well, now you know how to rotate an image on your webpage using plain JavaScript. You can also save the rotated image in your computer instantly. See this example.

← PreviousNext →