jqueryrotate 是可以實現 jQuery 旋轉效果的外掛，它支援 Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高階瀏覽器下使用duTransform，低版本ie使用VML實現。

rotate() 方法:

屬性引數：

1.angle屬性：［Number］ – default 0 – 旋轉的角度數，並且立即執行

$(“#img”).rotate({angle:45});

2.bind屬性：［Object］ 物件，包含繫結到一個旋轉物件的事件。事件內部的$（this）指向旋轉物件-這樣可以在內部鏈式呼叫- $（this）.rotate（…）。

$("#img").rotate({
  bind:{
  click:function(){
  $(this).rotate({
  angle:0,
animateTo:180
})
}
}
});

3.animateTo屬性：［Number］– default 0 –從當前角度值動畫旋轉到給定的角度值（或給定的角度引數）

4.duration屬性：［Number］–指定使用animateTo的動畫執行持續時間

$("#img").rotate({
  bind:{
   click:function() {
  $(this).rotate({
duration: 
 
6000,
angle:0,
animateTo:100
})
}
  }
});

5. step屬性：［Function］ – 每個動畫步驟中執行的回撥函式，當前角度值作為該函式的第一個引數

6.easing屬性：［Function］–預設（see below）
預設：function（x，t，b，c，d）{ return -c *（（t=t/d-1）*t*t*t - 1）+ b; }

Where:

t：current time，

b：begInnIng value，

c：change In value，

d：duration，

x：unused

沒有漸變：No easing（linear easing）：function（x，t，b，c，d）{ return（t/d）*c ; }

7.callback屬性：［Function］ 動畫完成時執行的回撥函式

// 旋轉完成後彈出1
$("#img").rotate({
  bind:{
    click:function(){
  $(this).rotate({
  angle:0,
animateTo:180,
callback:function(){
          alert(1)
        }
})
}
 }
});

8. getRotateAngle這個函式只是簡單地返回旋轉物件當前的角度。

// 旋轉完成後，點選彈出當前角度45
$("#img").rotate({
  angle:45,
bind:{
  click:function(){
alert($(this).getRotateAngle());
}
}
});

9.stopRotate這個函式只是簡單地停止正在進行的旋轉動畫。例如：

// 點選旋轉180 延遲1秒停止旋轉
$("#img").rotate({
bind:{
click:function(){
$(this).rotate({
angle:0,
animateTo:180,
duration:6000
});
setTimeout(function(){
$("#img").stopRotate();
},1000);
}
}
});

示例1：直接旋轉一個角度

$('#img1').rotate(45);  

// 或者

$('#img1').rotate({angle:45});  

示例2：滑鼠移動效果

$('#img2').rotate({   
    bind : {  
        mouseover : function(){  
            $(this).rotate({animateTo: 180});  
        }, mouseout : function(){  
            $(this).rotate({animateTo: 0});  
        }  
    }  
}); 

示例3：不停旋轉

var angle = 0;  
setInterval(function(){  
    angle +=3;  
    $('#img3').rotate(angle);  
}, 50);  

// 或者

var rotation = function (){  
    $('#img4').rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation  
    });  
}  
rotation();

// 或者

var rotation2 = function(){  
    $('#img5').rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation2,  
        easing: function(x,t,b,c,d){  
            return c*(t/d)+b;  
        }  
    });  
}  
rotation2();

示例4：點選旋轉

$('#img6').rotate({   
    bind: {  
        click: function(){  
            $(this).rotate({  
                angle: 0,  
                animateTo: 180,  
                easing: $.easing.easeInOutExpo  
            });  
        }  
    }  
});

// 或者

var value2 = 0;  
$('#img7').rotate({   
    bind: {  
        click: function(){  
            value2 +=90;  
            $(this).rotate({  
                animateTo: value2  
            });  
        }  
    }  
});