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

Akash Chauhan October 13, 2022
How to rotate images with a simple click of a button using javascript


A quick Google search will show you how to rotate an image in HTML. But what if you want to rotate an images with a simple click of button using javascript. Here's a quick tutorial on how to do just that.

Many people don't know how to rotate images in JavaScript. It's actually quite simple. With a few lines of code, you can rotate an image 90 degrees.

To rotate an image, you need to use the rotate() method. This method takes an angle as a parameter. The angle is measured in degrees. So, to rotate an image 90 degrees, you would pass in the value 90.

You can also use negative values to rotate an image in the opposite direction. For example, if you wanted to rotate an image 180 degrees, you would pass in the value -180.

we'll go over how to rotate an image 90 degrees using a simple JavaScript onclick function.

This can be useful for displaying different images depending on the orientation of the device, or for providing a more intuitive interface for users to flip between images.

For instance, if you have a product image that can be rotated to show different sides, you could use this technique to give the user some control over which view they see.

The first thing we need to do is add an onclick event handler to our image. This will trigger the rotation code when the image is clicked.

We'll also need to define a function to perform the actual rotation. The CSS transform property can be used for rotating elements, and we can use it here with a rotate value of 90 degrees.


Learning Objectives:

  • Css transform:rotate()
  • Get the image element using JavaScript
  • Add JavaScript click event to the image 
  • Rotate image clockwise onclick JavaScript
  • Rotate image anticlockwise onclick JavaScript
  • Summary

Css transform:rotate()

CSS transform is a property that allows you to change the position, size, and shape of an element. You can also use it to rotate, scale, and skew an element.

The rotate function lets you rotate an element around a certain point.  if you wanted to rotate an image of a clockwise by 90 degrees, you would use the following code: img { transform: rotate(90deg); } The scale function lets you change the size of an element. 

For example, if you wanted to make an image twice as large, you would use the following code: img { transform: scale(2); } The skew function lets you distort an element.

Another way to rotate an image on a web page is by using CSS animations. To do this, you first need to create a @keyframes rule with a name that you will use later.

In this rule, you will specify the amount of rotation that should happen at specific points in time.

The image can be rotated clockwise or anticlockwise.

For example, to rotate an image clockwise by 90 degrees clockwise, the code would be as follows:


img {

  transform: rotate(90deg);

}
If you want to rotate an image  anticlockwise by 90 degrees, you would use: 

img {

  transform: rotate(-90deg);

}


Get the image element using JavaScript

rotate image using javascript
Test Image

In order to get the image element using JavaScript, one must first understand how the img tag works in HTML. The img tag is used to embed an image into a web page.

The image tag has two attributes, src and alt. The src attribute specifies the URL of the image to be displayed. The alt attribute provides alternate text for the image, if the image cannot be displayed.

To get the image element using JavaScript, one can use the getElementById method. This method returns the element with the specified id attribute.


For example, if one wanted to get the image element with an id of "myImage", they would use the following code:

<html>
   <body>
	<h1>How to rotate image clockwise anticlockwise onclick button javascript?</h1>
	<img alt="rotate image using javascript" border="0" data-original-height="495" data-original-width="742" height="133" id="myImage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcv1YL2VCTEUFLYhe_tejEF_eOy8MstSNbOxqu9_0caP2npp3qNvJNEatSJts5EiGrJSL92QeOLGjSfuckP2OIjuwIsaoMTXx4cswWiXR-15ncmb_4tO9NGYfyrQMtGCJgPMCH-uVLybQIzHGk8MxRekMEb2xn1xXY5oQS5sdeapk4ho14AR7CpjjW/w200-h133/rotate%20image%20javascript.jpg" width="200" />
	<script>
          var myImage = document.getElementById("myImage");
          console.log(myImage)
	</script>
   </body>
</html>
Once you have obtained a reference to the image element, you can access its properties and methods.

Result:

rotate image css and javascript


Add JavaScript click event to the image

JavaScript Click Event on Image

The image element in HTML is used to display images on a web page. You can add a click event to an image element in order to execute a function when the image is clicked.

To add a click event to an image, you need to use the onclick attribute. The onclick attribute takes a value, which is the name of the function to be executed when the image is clicked.


To attach the function to an element, you use the onclick attribute. 

For example:

onclick="onButtonClick()"

This will cause the onButtonClick() function to be executed when the element is clicked. You can also define inline JavaScript functions using the onclick attribute.

Rotate image clockwise onclick JavaScript

Image rotation is a popular image effect. It can be used to add interest to a webpage or to simply change the orientation of an image. There are many ways to rotate an image using javascript, but one of the easiest is to use the onclick function.

To rotate an image clockwise using javascript, we will need to use the onclick function. This function will take two arguments: the element that we want to rotate and the degree of rotation.

In our case, we will want to rotate the image by 90 degrees clockwise. Here is the code that we will need:

When you click on an image, sometimes you want it to rotate. Rotating an image on a webpage can be done using JavaScript. Here's how to do it.

First, you need to have an image element on your HTML page like we done above. Then, you'll need to set up a function to rotate the image when it's clicked like in the previous step.

In this function, you'll use the CSS transform property to rotate the image by a certain number of degrees,

For that we'll first need to access the transform property so that you could give it some value according to the angle you need according to your requirements so first I am going to rotate it clockwise.



<img id="myImage" alt="rotate image using javascript" border="0"
data-original-height="495" data-original-width="742" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcv1YL2VCTEUFLYhe_tejEF_eOy8MstSNbOxqu9_0caP2npp3qNvJNEatSJts5EiGrJSL92QeOLGjSfuckP2OIjuwIsaoMTXx4cswWiXR-15ncmb_4tO9NGYfyrQMtGCJgPMCH-uVLybQIzHGk8MxRekMEb2xn1xXY5oQS5sdeapk4ho14AR7CpjjW/w200-h133/rotate%20image%20javascript.jpg" width="200" /> <br/><button onclick="rotateImageClockWise()">Rotate image clockwise</button>

<script>
  function rotateImageClockWise() {
    var myImage = document.getElementById("myImage");
    myImage.style.transform = 'rotate(90deg)';
  }
</script>
 
Rotate image clockwise example:

rotate image clockwise onclick javascript
Rotate image clockwise example


Rotate image anticlockwise onclick JavaScript

To rotate an image by -90 degrees, we need to use the onclick event. The onclick event will allow us to execute a function when the user clicks on the image. In this function, we will use the JavaScript rotate() method.

This method takes two parameters: the first is the angle that we want to rotate the image by, and the second is an optional Boolean value that specifies whether or not we want to rotates in place around its center point. By default, this value is false.


In order to rotate the image by -90 degrees, we need to set the angle parameter to -90. We also need to set the optional Boolean value to true so that the image rotates in place around its center point.

After setting these two parameters, we can call the rotate() method on our image object.


<img id="myImage" alt="rotate image using javascript" border="0"
data-original-height="495" data-original-width="742" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcv1YL2VCTEUFLYhe_tejEF_eOy8MstSNbOxqu9_0caP2npp3qNvJNEatSJts5EiGrJSL92QeOLGjSfuckP2OIjuwIsaoMTXx4cswWiXR-15ncmb_4tO9NGYfyrQMtGCJgPMCH-uVLybQIzHGk8MxRekMEb2xn1xXY5oQS5sdeapk4ho14AR7CpjjW/w200-h133/rotate%20image%20javascript.jpg" width="200" /> <br/><button onclick="rotateImageAntiClockWise()">Rotate image Anticlockwise</button>

<script>
  function rotateImageAntiClockWise() {
    var myImage = document.getElementById("myImage");
    myImage.style.transform = 'rotate(-90deg)';
  }
</script>
 
Rotate image Anticlockwise example:
Rotate image anticlockwise example
Rotate image Anticlockwise example

Conclusion

This article has shown you how to rotate an image clockwise or anticlockwise onclick using button javascript. 

In conclusion,it is possible to rotate an image 90 degrees using a JavaScript onclick function. 

To rotate an image using a Javascript onclick function, set the rotation angle,define the function to rotate the image and get the image DOM element to change the value of css property "transform".. 

Then, the JavaScript file must be linked to the HTML file. Finally, the image can be rotated by clicking on it.


By following the steps outlined in this article, you can easily add this functionality to your own web applications.

Give it a try today!

Related Articles

Tags

Post a Comment

2 Comments