.rotate()

by Roberto Apasajja

HTML

<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn1">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn2">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn3">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn4">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn5">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn6">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="btn7">

CSS

body {
  padding:30px;
  background:black;
}

img {
  margin-bottom:30px;
}

JavaScript

// .rotate() DEMO
$(function() {

  $('#btn1').click(function() {
    $(this).rotate();
  }).click();

  $('#btn2').click(function() {
    $(this).rotate({ count:4, duration:0.6, easing:'ease-out' });
  });
  
  $('#btn3').toggle(function() {
    $(this).rotate({ endDeg:180, persist:true });
  }, function() {
    $(this).rotate({ endDeg:360 });
  });

  $('#btn4').toggle(function() {
    $(this).rotate({ endDeg:180, persist:true });
  }, function() {
    $(this).rotate({ endDeg:-360, duration:0.8, easing:'ease-in' });
  });

  $('#btn5').click(function() {
    $(this).rotate({ startDeg:-25, endDeg:0, easing:'ease-in' });
  });

  $('#btn6').click(function() {
    $(this)
      .css({ position:'relative', left:0 })
      .rotate({ count:2, easing:'ease-in', animate:{ left:120 } })
      .fadeTo(400, 0.1)
      .fadeTo(300, 1)
      .delay(200)
      .rotate({ endDeg:-360, count:3, easing:'ease-out', animate:{ left:0 } });
  });

  $('#btn7').toggle(function() {
    $(this).rotate({ count:99999, forceJS:true });
  }, function() {
    $(this).stop();
  });
    
});


/*
jQuery-Rotate-Plugin v0.2 by anatol.at
http://jsfiddle.net/Anatol/T6kDR/
*/
$.fn.rotate=function(options) {
  var $this=$(this), prefixes, opts, wait4css=0;
  prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
  opts=$.extend({
    startDeg: false,
    endDeg: 360,
    duration: 1,
    count: 1,
    easing: 'linear',
    animate: {},
    forceJS: false
  }, options);

  function supports(prop) {
    var can=false, style=document.createElement('div').style;
    $.each(prefixes, function(i, prefix) {
      if (style[prefix.replace(/\-/g, '')+prop]==='') {
        can=true;
      }
    });
    return can;
  }

  function prefixed(prop, value) {
    var css={};
    if (!supports.transform) {
      return css;
    }
    $.each(prefixes, function(i, prefix) {
      css[prefix.toLowerCase()+prop]=value || '';
    });
    return css;
  }

  function generateFilter(deg) {
    var rot, cos, sin, matrix;
    if...