CSS3 提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁(yè)面更加生動(dòng)活潑有趣，不再一動(dòng)不動(dòng)。然后 IE10 以下版本的瀏覽器不支持 CSS3 變形，雖然 IE 有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。

今天介紹一款 jQuery 插件——jqueryrotate，它可以實(shí)現(xiàn)旋轉(zhuǎn)效果。jqueryrotate 支持所有主流瀏覽器，包括 IE6。如果你想在低版本的 IE 中實(shí)現(xiàn)旋轉(zhuǎn)效果，那么 jqueryrotate 是一個(gè)很好的選擇。

兼容性

jqueryrotate 支持所有主流瀏覽器，包括 IE6。jqueryrotate 在高級(jí)瀏覽器中使用 CSS3 transform 屬性實(shí)現(xiàn)，在低版本 IE 中使用 VML 實(shí)現(xiàn)。當(dāng)然，你可以使用 IE 條件注釋?zhuān)桶姹?IE 使用 jqueryrotate，高級(jí)瀏覽器則直接使用 CSS3。

使用方法

//演示1
//旋轉(zhuǎn)45angle
$(document.body).click(function () {
 //方式1
 $('.divOne').rotate(45);
 //方式2
 $('.divOne').rotate({ angle: 45 });
});

//演示2
//鼠標(biāo)移動(dòng)效果
//方式1
$('.divOne').rotate({
 bind: {
 mouseover: function () {
  $(this).rotate({ animateTo: 180 });
 },
 mouseout: function () {
  $(this).rotate({ animateTo: 0 });
 }
 }
});
//方式2
$('.divOne').mouseover(function () {
 $(this).rotate({ animateTo: 180 });
}).mouseout(function () {
 $(this).rotate({animateTo:0});
});

//演示3 不停旋轉(zhuǎn)
//方式1
var angle = 0;
setInterval(function () {
 angle += 3;
 $('.divOne').rotate(angle);
}, 50);
//方式2
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback:rotation
 })
}
rotation();
//方式3
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback: rotation,
 easing: function (x, t, b, c, d) {
  return c * (t / d) + b;
 }
 })
}
rotation();

//演示4 點(diǎn)擊旋轉(zhuǎn)
//方式1
$('.divOne').click(function () {
 $(this).rotate({
 angle: 0,
 animateTo: 180,
 easing: $.easing.easeInOutExpo
 });
});
var val = 0;
$('.divOne').click(function () {
 val += 90;
 $(this).rotate({
 animateTo: val
 });
});

參數(shù)

參數(shù)	類(lèi)型	說(shuō)明	默認(rèn)值
angle	數(shù)字	旋轉(zhuǎn)一個(gè)角度	0
animateTo	數(shù)字	從當(dāng)前的角度旋轉(zhuǎn)到多少度	0
step	函數(shù)	每個(gè)動(dòng)畫(huà)步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(shù)的第一個(gè)參數(shù)	無(wú)
easing	函數(shù)	自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用 jQuery.easing.js	無(wú)
duration	整數(shù)	旋轉(zhuǎn)持續(xù)時(shí)間，以毫秒為單位
callback	函數(shù)	旋轉(zhuǎn)完成后的回調(diào)函數(shù)	無(wú)
getRotateAngle	函數(shù)	返回旋轉(zhuǎn)對(duì)象當(dāng)前的角度	無(wú)
stopRotate	函數(shù)	停止旋轉(zhuǎn)	無(wú)