enes yazici enes yazici - 7 months ago 117
Javascript Question

rotate animation in jquery or css

I want to create a rotating wheel luck game. I know that jquery has some features like fadein, fadeout etc. I was just wondering if there is also a rotating effect in jquery? if not then how can i do this effect?
thanks

Answer

There are a few ways to do this. The quickest way to do this is with CSS. The syntax is very simple.

-webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);

Remember, for the animation to smooth out, you will have to add transition styles:

-webkit-transition:transform 0.25s ease-out 0s; -ms-transition:transform 0.25s ease-out 0s; transition:transform 0.25s ease-out 0s;

alternatively, you can do this via jQuery (this jQuery is copied and pasted from this beautiful answer: http://stackoverflow.com/a/17348698/6049581)

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

Using the jQuery route is a little nicer if you need to change the rotation amount by looking at external factors.