How to rotate an image continuously using JavaScript and CSS3

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Today we’ll show how to rotate an image by 360 degrees, again and again, continuously to get an awesome animating effect, and that too with very little DHTML code.

Basic image rotation

The CSS3 rotate property allows you to tilt or rotate images at varying degrees. Basic image rotation can be achieved using a few lines of CSS3.

Here is the basic syntax,

 <style>

CSS Selector
 {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
 }

</style>
 

This one provides 90 degree image rotation, for only onetime. We need a continuous rotation i.e by 360 degrees again and again, something like this, have a look.

Continuous rotation by 360 degrees

To get a continuous rotation, we need to repeat the basic rotation again and again. This is done by repeatedly calling a JavaScript function at regular intervals; on each call, this function updates the degree of rotation and hence, provides a full 360 degree rotation.

Below written code would make it easier to understand. Lets, see the DHTML code first,


<center>
<body onload=setInterval("rott()",5)>
<img src='x.png' id='img1'>
</body>
</center>

Here x.png is the image to be rotated, you can name anything of your choice. rott() is the JavaScript function that rotates the image, its called again and again after 5milliseconds.

The processor, JavaScript code,

<script language='Javascript'>

 var val=0;
 function rott()
 {
 val=val+1;
 document.getElementById('img1').style.webkitTransform="rotate("+val+"deg)";
 document.getElementById('img1').style.mozTransform="rotate("+val+"deg)";
 }

</script>

As you can see, we have JavaScript version of CSS3 rotation. When the rott() function is called repeatedly after 5ms, we rotate the image by 1 degree every time. The variable val increments at each function call and updates the degree of image rotation, hence we get the continuous rotation.

What’s so good about this code?

Its useful and must know stuff if you’re a web developer. Also, rotating images using this technique could replace the bulky Ajax animation image.

You can also create animations in webpage like logos, slideshows and many other thing using the rotation property of CSS3 and adding a bit of JavaScript to it.

blog comments powered by Disqus