. Advertisement .
..3..
. Advertisement .
..4..
What is the process of rotating an image? There are a number of different ways that rotating an image can be accomplished, but one of the most common methods is with JavaScript. This article will provide you with a tutorial on How To Rotate Image With JavaScript.
How to rotate image using JavaScript
1) Using transform: rotate(x) in CSS
Functions: Rotate() in Transform CSS can be used to turn an element counterclockwise or clockwise by a particular angle. The measure used is the degrees (deg). Positive angles rotate clockwise, negative angles counterclockwise.
Method: Use document.querySelector(‘#img’) to select the element and then add the .style.transform attribute after it. This rotate property takes into account the parameter of circular angle measured in 360 degrees.
For example:
You have <img> tag like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript rotate images</title>
</head>
<body>
<img id="img" src="https://imagesource.com/350x150.png" />
</body>
</html>
To rotate the image 90 degrees, we use:
document.querySelector("#img").style.transform = "rotate(90deg)";
Then, the transform: rotate(x) property will be represented as follows:
<body>
<img
id="img"
src="https://imagesource.com/350x150.png"
style="transform: rotate(90deg);"
/>
</body>
If it is necessary to invert the image, we have:
document.querySelector("#img").style.transform = "rotate(360deg)";
2) Using Onclick
Functions: Simplify image rotation, which you can easily customize with the click of a button.
Method: You can design an JavaScript function that rotates the image. Then assign the feature to an the onclick attribute on the button.
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript rotate images</title>
</head>
<body>
<img id="img" src="https://imagesource.com/350x150.png" />
<button onClick="rotateImg()">Rotate Image</button>
<script>
function rotateImg() {
document.querySelector("#img").style.transform = "rotate(90deg)";
}
</script>
</body>
</html>
You can also alter how fast your image rotates by altering the transition property: i.e. If you wish to rotate faster, you could adjust it to a smaller amount for easing, like below:
<body>
<img id="img" src="https://imagesource.com/350x150.png" />
<button onClick="rotateImg()">Rotate Image</button>
<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>
In case you need to rotate the image upside down, you can do the following:
document.querySelector("#img").style.transform = "rotate(-45deg)";
Conclusion
In this article, we will be discussing how to rotate image using JavaScript. Rotating an image is a great way to spice up your website or application and add some interactivity. Once you have everything set up, it should not take too much time to get rotating. Thanks for reading!
Leave a comment