JSFiddle - React, Tailwind, and code Playground
HTML
<br/><br/><br/><br/>
<img src="file:///C:/Users/grafik/Desktop/Animation/Cookies/mini-schoko_skuro.png" />
JavaScript
$.fn.rotate= function(settings) {
var _self = $(this), timer;
settings = $.extend({
startDeg: 0,
endDeg: 360,
rotations: 1
}, settings);
function rotate(degree) {
_self.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)'
});
}
timer = window.setInterval(function() {
rotate(settings.startDeg+=5);
if (settings.startDeg >= (settings.endDeg * settings.rotations)) {
clearInterval(timer);
}
}, 18);
};
$(function() {
$('img').live('click', function(){
$(this).rotate({
startDeg: 0,
endDeg: 360,
rotations: 1
});
});
});