CODEWITHSUNDEEP
javascriptjquery
fresa
fresa

Reputation: 101

Rotate image counterclockwise

I have circle which is rotating for the hour hand.

Here I tried to spin it counterclockwise:

<img src='http://aprilzero.com/static/images/rings_desktop/1.png'>

var $circle = $("img"), degree = 0, timer;
    var x = "-" + degree + 'deg';

function rotate(x) {  
      $circle.css({ WebkitTransform : 'rotate(x)',
                  '-webkit-transition-duration': '0.5s'
                  });
      timer = setTimeout(function() {
            ++degree; rotate();
      },100);

}
rotate();

How can I rotate my image counterclockwise?

FIDDLE

Upvotes: 0

Views: 1058

Answers (1)

Slippery Pete
Slippery Pete

Reputation: 3110

Use a negative angle:

var $circle = $("img"), degree = 0, timer;

    function rotate() {
      $circle.css({ WebkitTransform : 'rotate(' + degree + 'deg)',
                  '-webkit-transition-duration': '0.5s'
                  });

      timer = setTimeout(function() {
            --degree; rotate();
        },100);

    }

rotate();

http://jsfiddle.net/f7RNQ/18/

Upvotes: 2

Related Questions