jquery constant rotation

Question

Could someone show me a simple script that rotates

<img src="xxx.jpg" id="image">

I've read Howto rotate image using jquery rotate plugin?, but I'm still having trouble getting it to work, I've also looked at http://code.google.com/p/jqueryrotate/wiki/Examples#Example_3 but can't seem to find their code...

could someone help me out?

thanks!

score 2 · Accepted Answer · answered Jan 31 '12 at 17:15

2

The code is right below the example...

var angle = 0;
setInterval(function(){
      angle += 3;
     $("#img").rotate(angle);
}, 50);

answered Jan 31 '12 at 17:15

Ansel Santosa

8,224
1
28
39

Thanks, I don't know why it didn't work before when I tried it. One question though, I'm using this on a very large background image, do you know how I can make it as fluid as the Google example? – d-_-b Jan 31 '12 at 17:24
@LearningDaily - to make it smoother increase the setInterval period. This will cause more frequent updates. You can also reduce the angle. Note that the more processing you do the more work the browser has to do though. You can see my answer and the difference between versions /1 and / – mrtsherman Jan 31 '12 at 17:27

score 2 · Answer 2 · answered Jan 31 '12 at 17:24

You could try just setting the rotation transform instead of relying on the plugin. This won't cover all browser types, but gets the big, modern browsers.

http://jsfiddle.net/YgBMa/1

var angle = 0;
setInterval(function() {
    console.log(angle);
    $("#image")
        .css('-webkit-transform', 'rotate('+angle+'deg)')
        .css('-moz-transform', 'rotate('+angle+'deg)')
        .css('-ms-transform', 'rotate('+angle+'deg)');
    angle++;
}, 100);

Is there a way to make it stop after lets say 10 seconds? – eyedfox Dec 24 '20 at 12:12 — eyedfox, Dec 24 '20 at 12:12

jquery constant rotation

2 Answers2