The open blogging platform. Say no to algorithms and paywalls.

How to Rotate an Image with JavaScript

To rotate an image with JavaScript, you can access the image element using getElementById(), then set the style.transform property with the desired rotation value in degrees using the rotate() CSS function.

Here's the sample HTML code:

<!doctype html>

<html>
   
  <head>
       
    <title>JavaScript Rotate Image</title>

     
  </head>

   
  <body>
       
    <div style="margin: 8px">
            <img src="my-image.jpg" width="300" />
      <!-- The image element to rotate -->

            <img id="rotated" src="my-image.jpg" width="300" />

         
    </div>

       
    <script src="index.js"></script>

     
  </body>
</html>

Wallpics Canvas Prints.

And here's the JavaScript code in index.js to rotate the #rotated image element:

// Access DOM element object

const rotated = document.getElementById("rotated");

// Rotate element by 90 degrees clockwise

rotated.style.transform = "rotate(90deg)";

This will rotate the image by 90 degrees clockwise, as shown in the resulting web page.

Result

You can specify any angle between 1 and 359 for the rotation. For example, to rotate the image by 180 degrees clockwise:

// Access DOM element object

const rotated = document.getElementById("rotated");

// Rotate element by 180 degrees clockwise

rotated.style.transform = "rotate(180deg)";

This will rotate the image by 180 degrees clockwise:

Result

To rotate the image in the counter-clockwise direction, you can specify a negative angle. For example, to rotate the image by 90 degrees counter-clockwise:

// Access DOM element object

const rotated = document.getElementById("rotated");

// Rotate image by 90 degrees counter-clockwise

rotated.style.transform = "rotate(-90deg)";

This will rotate the image by 90 degrees counter-clockwise:

Result

You can also customize the image's transform origin using the transform-origin CSS property. By default, the element is rotated about its center point (center), but you can set it to different positions. For example, to rotate the image 90 degrees clockwise about the top-left corner:

// Access DOM element object

const rotated = document.getElementById("rotated");

// Rotate image by 90 degrees clockwise

rotated.style.transform = "rotate(90deg)";

// Rotate image about top-left corner

rotated.style.transformOrigin = "top left";

This will result in the image being rotated about the top-left corner:

Result

To rotate the image on button click, you can assign an event handler function to the onclick attribute of the button element:

<!doctype html>

<html>
   
  <head>
       
    <title>JavaScript Rotate Image</title>

     
  </head>

   
  <body>
       
    <div>
           
      <!-- Assign "rotateImage()" to "onclick" attribute -->

            <button id="rotate" onclick="rotateImage()">Rotate image</button>
      <!-- The image element to be rotated -->

            <img id="rotated" src="my-image.jpg" width="300" />

         
    </div>

       
    <script src="index.js"></script>

     
  </body>
</html>

And in index.js, define the rotateImage() function as the click event handler:

// Access DOM element object

const rotated = document.getElementById("rotated");

function rotateImage() {
  // Rotate image by 90 degrees clockwise

  rotated.style.transform = "rotate(90deg)";
}

Now, when you click the button, the image will be rotated 90 degrees clockwise:

Result

To incrementally rotate the image on button click, you can store the current angle of rotation in a variable and update it with each click:

// Access DOM element object

const rotated = document.getElementById("rotated");

// Variable to hold the current angle of rotation

let rotation = 0;

// How much to rotate the image at a time

const angle = 90;

function rotateImage() {
  // Ensure angle range of 0 to 359 with "%" operator,

  // e.g., 450 -> 90, 360 -> 0, 540 -> 180, etc.

  rotation = (rotation + angle) % 360;

  rotated.style.transform = `rotate(${rotation}deg)`;
}

Now, each time you click the button, the image will be rotated by 90 degrees:

Result




Continue Learning