How to rotate image or icon through Javascript onclick?

Akash Chauhan September 05, 2022

Rotation is a two-dimensional transformation that is used to change the orientation of an object.

There are many ways to rotate images using CSS. The most common way to rotate image is to use the CSS rotation property. This property allows you to rotate an image by a certain degree.

You can also use the rotate css function. This function allows you to rotate an image by a certain degree.

Learning Objectives

In this lecture you will learn:

  • Css rotate proprty
  • Create a button and an image to rotate image
  • Rotate image using javascript
  • Summary
First we need to divide our task into 2 parts, first we need to learn css rotate property so that we could create a class that will rotate image with the help of javascript onclick method.


CSS Rotate property

The CSS rotate property is used to rotate an element around its center. with css property we could rotate it to specific angle by giving value to css rotate.

One of the cool features of css is to use css animations, the element can be rotated clockwise or anti clock wise according to your needs. css transform property that take rotate as value along with angle

To use the CSS rotation property, you must first set the width and height of the element. Then, you set the rotation angle. The rotation angle can be set in degrees. 

You can also set the direction of the rotation. The default direction is clockwise. To rotate counter clock wise, you can set the transform property of css to reverse.

The CSS rotation property is supported by all major browsers, including Internet Explorer 9+.


#gearImage {
  animation: rotation 1s linear 0s infinite;
  animation-play-state: paused;
}

@keyframes rotation {
  to {
    transform: rotate(360deg)
  }
}

Create a button and an image to rotate image

If you want a button to rotate the image then you must first need to specify a button so that css rotate property could work.
On the above code you could see css animation to rotate image with the help of keyframes.

You could only choose to rotate it on button click too. but for now let me show you how you can rotate a gear button through javascript.



<img id="gearImage" src="https://icon2.cleanpng.com/20180204/vee/kisspng-gear-icon-gears-png-file-5a7793b1e283d3.8984860115177860339278.jpg" height="100"></br>
</br>

<button onclick="rotateImage()">toogle rotation</button> 

Rotate image using javascript

Here is the javascript code to rotate image. We have webKitAnimationPlayState that will make things easy you can check the state of the element and change the state to paused or running and it will help to rotate image.
Thats how we can rotate image conditionally.
<script>
function rotateImage() {
  var image = document.getElementById("image");
  if (image.style.webkitAnimationPlayState == "running") {
    image.style.webkitAnimationPlayState = "paused";
  } else {
    image.style.webkitAnimationPlayState = "running";
  }
}
</script>
Here is the complete Code to rotate image using javascript


  

<!DOCTYPE html>
<html>
<head>
<style> 
#gearImage {
  animation: rotation 1s linear 0s infinite;
  animation-play-state: paused;
}

@keyframes rotation {
  to {
    transform: rotate(360deg)
  }
}
</style>
</head>
<body>
<style>
<img id="gearImage" src="https://icon2.cleanpng.com/20180204/vee/kisspng-gear-icon-gears-png-file-5a7793b1e283d3.8984860115177860339278.jpg" height="100"></br>
</br>
<button onclick="rotateImage()">toogle rotation</button>>

<script>
function rotateImage() {
  var image = document.getElementById("gearImage");
  if (image.style.webkitAnimationPlayState == "running") {
    image.style.webkitAnimationPlayState = "paused";
  } else {
    image.style.webkitAnimationPlayState = "running";
  }
}
</script>

</body>
</html>
If you want to rotate image to some angle that you want then you just have to change the property transform and provide it some value in angle like that

  

<script>
      function rotateImg() {
        document.querySelector("#img").style.transform = "rotate(90deg)";
      }
</script>

Summary

I hope you have found what you were looking for ,To rotate image,

we have implmented some animations using keyframe (css property) that helped us to rotate image by checking the current state of image using webkitAnimationPlayState.

And also to rotate image to a specific direction by giving it some value. Feel free to make custom change into your code to make changes to the angle.

Tags

Post a Comment

0 Comments