jQuery3Dy是一個(gè)強(qiáng)大的jQuery插件，可以幫助我們輕松地實(shí)現(xiàn)3D效果。其中，軸旋轉(zhuǎn)是其一個(gè)重要功能，下面我們來介紹一下。

// 實(shí)現(xiàn)軸旋轉(zhuǎn)
$.fn.rotate = function() {
// 獲取旋轉(zhuǎn)角度和旋轉(zhuǎn)軸向
var angle = arguments[0] || 0,
x = arguments[1] || 0,
y = arguments[2] || 0,
z = arguments[3] || 0,
a = Math.cos(angle/2),
b = -1*Math.sin(angle/2)*x,
c = -1*Math.sin(angle/2)*y,
d = -1*Math.sin(angle/2)*z;
// 構(gòu)造旋轉(zhuǎn)矩陣
var matrix = 'matrix3d(' +
(a*a+b*b-c*c-d*d) + ',' +
(2*b*c-2*a*d) + ',' +
(2*b*d+2*a*c) + ',0,' +
(2*b*c+2*a*d) + ',' +
(a*a+c*c-b*b-d*d) + ',' +
(2*c*d-2*a*b) + ',0,' +
(2*b*d-2*a*c) + ',' +
(2*c*d+2*a*b) + ',' +
(a*a+d*d-b*b-c*c) + ',0,0,0,0,1)';
// 設(shè)置樣式
return this.css({
'-webkit-transform': matrix,
'-moz-transform': matrix,
'-ms-transform': matrix,
'-o-transform': matrix,
'transform': matrix
});
};

上面的代碼定義了一個(gè)jQuery方法，可以根據(jù)給出的旋轉(zhuǎn)角度和軸向?qū)崿F(xiàn)元素的旋轉(zhuǎn)效果。首先，我們通過傳遞的參數(shù)計(jì)算出旋轉(zhuǎn)矩陣，然后將矩陣應(yīng)用到元素的樣式中。注意，樣式需要添加瀏覽器廠商前綴，以保證在各種瀏覽器中都能正常使用。

使用這個(gè)方法非常簡(jiǎn)單：

// 獲取要旋轉(zhuǎn)的元素
var box = $('.box');
// 在X軸上旋轉(zhuǎn)45度
box.rotate(Math.PI/4, 1, 0, 0);
// 在Y軸上旋轉(zhuǎn)45度
box.rotate(Math.PI/4, 0, 1, 0);
// 在Z軸上旋轉(zhuǎn)45度
box.rotate(Math.PI/4, 0, 0, 1);

上面的代碼實(shí)現(xiàn)了一個(gè)盒子元素在三個(gè)軸向上連續(xù)旋轉(zhuǎn)45度的效果。可以通過改變參數(shù)，實(shí)現(xiàn)不同角度和軸向的旋轉(zhuǎn)效果。