rotate animation in jquery or css

Question

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 1

I created a makeshift fiddle for reference. You maybe need something very similar to this just find an appropriate image.

use animations using following styles:

#wheel-container img{
height: 300px;
width: 300px; 
padding: 30px;
}
.spin-wheel {
animation: spin 0.5s infinite;
}

@keyframes spin {
0%: {
  transform: rotate(60deg);
}

25% {
  transform: rotate(120deg);
}

50% {
  transform: rotate(180deg);
}

75% {
  transform: rotate(270deg);
}
100% {
  transform: rotate(360deg);
}
}

https://jsfiddle.net/L8jpgL4v/23/

Answer 2

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: https://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.