How do you rotate an image in javascript?

Learn how to rotate images with JavaScript. Example code included.

When you need to rotate images using JavaScript, you need to add the transform: rotate(x) CSS style to the image element you want to rotate.

For example, let’s say you have the following tag in your project:


<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript rotate imagestitle>
  head>
  <body>
    <img id="img" src="https://via.placeholder.com/350x150.png" />
  body>
html>

To rotate the image, you can select the element using document.querySelector('#img') and then append the .style.transform property to the element. The rotate property accepts the circular angle parameter measured in 360 degrees.

The following JavaScript code will rotate the image by 90 degrees:

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

The transform: rotate(x) style will be added to your HTML tag as follows:

<body>
  <img
    id="img"
    src="https://via.placeholder.com/350x150.png"
    style="transform: rotate(90deg);"
  />
body>

It’s up to you how many degrees you want to rotate the . To turn the image upside down, you can use rotate(360deg) property:

document.querySelector("#img").style.transform = "rotate(360deg)";

Rotate an image with a button click

If you need to rotate the image when a button is clicked, you can create a JavaScript function to rotate the image. Then, you need to assign that function to the onclick attribute of the button:


<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript rotate imagestitle>
  head>
  <body>
    <img id="img" src="https://via.placeholder.com/350x150.png" />
    <button onClick="rotateImg()">Rotate Imagebutton>
    <script>
      function rotateImg() {
        document.querySelector("#img").style.transform = "rotate(90deg)";
      }
    script>
  body>
html>

You can also further rotate the image by 90 degrees each time the button is clicked by first creating a variable that holds the rotation angle.

Take a look at the following example:

<body>
  <img id="img" src="https://via.placeholder.com/350x150.png" />
  <button onClick="rotateImg()">Rotate Imagebutton>
  <script>
    let rotation = 0;
    function rotateImg() {
      rotation += 90; // add 90 degrees, you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }
      document.querySelector("#img").style.transform = `rotate(${rotation}deg)`;
    }
  script>
body>

Finally, you can rotate the image counter clockwise by adding a negative number instead of a positive. The following code shows how you can rotate the image -45 degrees:

document.querySelector("#img").style.transform = "rotate(-45deg)";

And that’s how you can rotate images using JavaScript. Feel free to modify the code as you see fit.

How do you rotate an object in JavaScript?

The rotate() method allows you to rotate a drawing object on the canvas. The rotate() method accepts a rotation angle in radians. If the angle is positive, the rotation is clockwise. In case the angle is negative, the rotation is counterclockwise.

How do you rotate in image?

Rotate a picture or shape a specific amount.
Select the picture or shape. This will open the Shape Format or Picture Format ribbon..
Select Rotate. Use any of the rotation commands in the list, like Flip Horizontal..
Select More Rotation Options and enter the precise amount in the Rotation box..

How do I rotate an image in HTML?

Syntax: transform: rotate(90deg);

How do I rotate an image in react JS?

JS (Babel).
class RotateIMG extends React. Component{.
constructor(props){.
super(props);.
this. state = {.
rotation: 0..
this. rotate = this. rotate. bind(this);.