一、前面的嘮叨

圖片的旋轉(zhuǎn)可以說是一種效果，但是逐漸的，旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個范疇，其更具有使用性，功能性。我們都知道，照片有時候是需要橫過來的拍的，當(dāng)我們預(yù)覽或共享到web上時需要進行旋轉(zhuǎn)。這個操作在以往可能更多的是交給軟件去完成，然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。但是，現(xiàn)在直接就可以在web上對圖片進行旋轉(zhuǎn)之類的處理，就算圖片處理軟件再怎么方便好用，也不及直接發(fā)布時對圖片做調(diào)整來的方便。這就是圖片旋轉(zhuǎn)功能的實用意義。我們可以在新浪微博上見到這種圖片旋轉(zhuǎn)的功能。

二、CSS3與圖片旋轉(zhuǎn)

CSS3中有支持圖片旋轉(zhuǎn)的屬性：CSS3 >> transform >> rotate 。舉個簡單的例子，例如下面的CSS代碼：

        
          -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
        
      

將其作用于圖片上，結(jié)果如下（截自Firefox3.5）：

從左圖可以看到，圖片旋轉(zhuǎn)了-90度，也就是順時針旋轉(zhuǎn)了270度。CSS3下的旋轉(zhuǎn)效果不僅可以作用于圖片，任何的inline水平或是block水平的元素都受其作用，并且可以實現(xiàn)任意角度的旋轉(zhuǎn)，確實很實用。前面我也寫過一篇相關(guān)的文章： CSS3 transition實現(xiàn)超酷圖片墻動畫效果 ，里面有一些關(guān)于CSS3 transform的介紹。
不可避免，說到CSS3，就要扯到“支持性”這個問題，與其他些CSS3屬性類似，IE瀏覽器不支持，Opera也不支持。只有Firefox3+，chrome與Safari瀏覽器支持transform的rotate屬性，所以，只想用CSS實現(xiàn)旋轉(zhuǎn)效果，有難度。其他不說，得要解決瀏覽器大頭IE才是，好在IE的私有濾鏡可以實現(xiàn)元素的旋轉(zhuǎn)效果，見下一部分。

三、IE濾鏡與圖片旋轉(zhuǎn)

IE的filter濾鏡其實不算個太好的東西，我個人感覺是這樣，像個性格孤僻的自以為是的獨裁者，但是，很多時候，沒有辦法，還是得想到它。要說目前IE下最簡單的實現(xiàn)圖片旋轉(zhuǎn)的效果，那莫過于其私有的濾鏡屬性了。

首先，簡單點的，實現(xiàn)與上例類似的效果，代碼如下：

        
          filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        
      

結(jié)果與上面的效果一致：

這里，濾鏡代碼部分，前面長長的大小寫錯綜的部分我們不用管它，看后面的”rotation=3″這是關(guān)鍵，這里的參數(shù)可以是0，1，2，3，沒有4，要是是4啊，5啊之類的，圖片就不旋轉(zhuǎn)了。旋轉(zhuǎn)的角度只要將這些數(shù)值乘以90(π/2)就可以了，所以呢”rotation=3″表示順時針旋轉(zhuǎn)270度，與transform:rotate(270deg);是一個意思。所以，這里，就會有些小小的局限——不能實現(xiàn)任意角度的旋轉(zhuǎn)，只能是90度，180度以及270度。但是，IE瀏覽器不是個簡單的羅羅，要實現(xiàn)任意角度的旋轉(zhuǎn)，它還是有辦法的，只是要比上面的麻煩些，難理解些，要用到矩陣變換濾鏡。

ps:據(jù)說，純粹是據(jù)說，目前為止我沒遇到過，IE8瀏覽器（在非標(biāo)準(zhǔn)模式下），在CSS中，要使用“-ms-filter”代替“filter”。

先上實例代碼，以下代碼將實現(xiàn)圖片順指針旋轉(zhuǎn)60度的效果：

        
          filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=-0.866,M21=0.866,M22=0.5,SizingMethod='auto expand');
        
      

結(jié)果呢，IE6下的效果就是：

這里濾鏡參數(shù)好像比較多，看得人心里毛毛的，不過呢，拆開來看，也是小家常。

我們要關(guān)注的其實就只是這一部分：”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″，有人可能會問，這里的幾個數(shù)值是怎么來的，答案很簡單 – “計算來的”。假設(shè)我們要旋轉(zhuǎn)的角度是rotation，則計算過程如下：

sin = sin(roation);cos = cos(roation);
M11 = cos;M12 = -sin;M21 = sin;M22 = cos;

例如這里要旋轉(zhuǎn)60度，即rotation=60，所以sin = sin(60) = 0.866, cos = cos(60) = 0.5，于是就有了”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″。所以呢，要實現(xiàn)IE下任意角度圖片的旋轉(zhuǎn)記住下面的式子就可以了： filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

這個矩陣濾鏡還可以實現(xiàn)進行縮放，對此不詳述。

四、CSS3與IE濾鏡圖片旋轉(zhuǎn)綜合與對比

不管三七二十一，先看一個綜合實例，方便對比。
實現(xiàn)旋轉(zhuǎn)90度和135度兩個效果，CSS部分代碼如下：

        
          #rot90{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
#rot135{-moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

        
      

HTML部分：

        
          <img id="rot90" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋轉(zhuǎn)90°
<img id="rot135" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋轉(zhuǎn)135°
        
      

以下為IE和Firefox下的對比圖：

正如上圖標(biāo)注的，雖然看上去實現(xiàn)的旋轉(zhuǎn)效果是一樣的，但實際上CSS3下的旋轉(zhuǎn)不改變原始圖片占據(jù)的空間的大小，所以您會看到使用CSS3 transform旋轉(zhuǎn)的圖片可那會覆蓋在其他元素上，但是IE卻不是如此，圖片占據(jù)空間的大小一致是跟著旋轉(zhuǎn)后的圖片走的，所以IE濾鏡實現(xiàn)的旋轉(zhuǎn)就不會看到圖片覆蓋其他元素的情況，因為它會把它們擠開。

如果不考慮在中國使用率極低的Opera瀏覽器以及比較較低的Firefox2以及以下的瀏覽器，事情（圖片旋轉(zhuǎn)）似乎變得很容易。
，我們似乎可以輕松的實現(xiàn)圖片的旋轉(zhuǎn)——例如開始新浪微博圖片旋轉(zhuǎn)截圖效果的實現(xiàn)只要變變class類就可以了。但是，我們可以放棄Opera瀏覽器以及Firefox2及以下版本的瀏覽器了嗎？這要看你網(wǎng)站的目標(biāo)群體，大小，及性質(zhì)了。在目前的狀況下，一般而言，是放棄不得了，這就迫使我們另謀出路，這就是HTML5中的canvas標(biāo)簽。

五、canvas標(biāo)簽與圖片旋轉(zhuǎn)

首先簡單講講canvas標(biāo)簽，canvas屬于HTML元素，是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

<canvas> 標(biāo)記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，并且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領(lǐng)。這兩個瀏覽器都支持 <canvas> 標(biāo)記（使用js插件也可以使IE支持canvas標(biāo)簽）。所以，雖然純粹的CSS不能照顧到Opera瀏覽器以及低版本的Firefox，沒有關(guān)系，我們可以使用canvas標(biāo)簽。

canvas只是有一個基于 JavaScript 的繪圖 API，所以說要使用canvas繪圖離不開JavaScript，題外話不說，我們看怎樣利用canvas+JavaScript實現(xiàn)圖片的旋轉(zhuǎn)吧。

這里IE先放在一邊，我們看看如何使用canvas實現(xiàn)旋轉(zhuǎn)90度的效果，代碼如下：

        
          
            HTML部分
          
          
<canvas id="cv"></canvas>
<img id="cvImg" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

          
            JavaScript部分
          
          
window.onload = function(){
	var canvas = document.getElementById("cv");
	var oImg = document.getElementById("cvImg");
	
          
            //旋轉(zhuǎn)后canvas標(biāo)簽的大小
          
          
	canvas.height = 128;
	canvas.width = 96;
	
          
            //繪圖開始
          
          
	var context = canvas.getContext("2d");
	context.save();
	
          
            //改變中心點
          
          
	context.translate(96,0);
	
          
            //旋轉(zhuǎn)90°
          
          
	context.rotate(Math.PI/2);
	
          
            //繪制
          
          
	context.drawImage(oImg, 0, 0, 128, 96);
	context.restore();
	oImg.style.display = "none";
};

        
      

結(jié)果在不支持CSS3 transform的Opera9瀏覽器下：

如果要讓IE下也有同樣的效果，很簡單，加上這么句代碼：
<!- -[if IE]><script type="text/javascript" src=" http://www.zhangxinxu.com/style/js/excanvas.js "></script><![endif]- -> （這里為了防止注釋沖突，雙連線用空格隔開了）

其中鏈接的js文件是使IE瀏覽器也支持canvas標(biāo)簽的插件JavaScript，能實現(xiàn)大多數(shù)canvas標(biāo)簽實現(xiàn)的效果，圖片的旋轉(zhuǎn)當(dāng)然不在話下，您可以試試。

六、旋轉(zhuǎn)效果jQuery插件

通過上面的一些探討，其實可以發(fā)現(xiàn)實現(xiàn)圖片旋轉(zhuǎn)的方法其實不少，這里介紹的這個jQuery插件使用的方法是：IE下濾鏡+其他瀏覽器canvas的方法。

插件壓縮后不足2k，是款很輕量級的插件，很精巧。可以實現(xiàn)任意角度圖片的旋轉(zhuǎn)，使用方法也很簡單。例如： $("imgRotate").rotate(90); 就是表示旋轉(zhuǎn)90度了，如果要實現(xiàn)向左轉(zhuǎn)與向右轉(zhuǎn)，有專門的方法，就是$(“選擇器”).rotateLeft(); 與 $(“選擇器”).rotateRight();

具體使用實例參見下一部分。

七、圖片旋轉(zhuǎn)實例

本實例要實現(xiàn)的效果就是新浪微博上的圖片的“向左轉(zhuǎn)”和“向右轉(zhuǎn)”效果。將使用三種方法，一是忽略低版本Firefox與Opera瀏覽器的CSS方法；二是使用jQuery插件實現(xiàn)效果的示例；三是純粹canvas標(biāo)簽無JavaScript庫支持實現(xiàn)的方法。

不完全兼容的CSS方法
此方法的原理很簡單，切換HTML元素對象（圖片）的class。如下CSS代碼：

        
          .rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

        
      

再添加簡單的JavaScript代碼——根據(jù)是向左轉(zhuǎn)還是向右轉(zhuǎn)動態(tài)改變class的名稱就行了。
這里使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式?jīng)]有效果的。但絕對適用于90%以上的互聯(lián)網(wǎng)用戶了。

jQuery插件實現(xiàn)方法
使用插件一般而言是比較簡單的。但是這里，由于插件js是款相當(dāng)輕量級的代碼插件，功能有限。如果不做任何特別的處理的話，此插件只支持一次的圖片旋轉(zhuǎn)效果，因為分析插件可知，當(dāng)運行一次canvas旋轉(zhuǎn)后，canvas標(biāo)簽會將原來的圖片標(biāo)簽代替掉，使得圖片的連續(xù)旋轉(zhuǎn)遇到麻煩，需要每次旋轉(zhuǎn)后重新輸入圖片相關(guān)的HTML代碼。
上面所述對應(yīng)的JavaScript代碼如下：

        
          param.right.click(function(){
	if(!$("img#rotImg").length){
		
          
            param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
          
          
	}
	fun.right(); 
          
            //執(zhí)行向右旋轉(zhuǎn)
          
          
	return false;
});

        
      

js部分需要調(diào)養(yǎng)jQuery庫和此輕量級旋轉(zhuǎn) 插件

說明：此效果在IE下似乎有點問題，經(jīng)常會有點擊無旋轉(zhuǎn)，再點擊跳過剛才旋轉(zhuǎn)的情況，我不清楚是次插件的問題，還是IE瀏覽器對filter矩陣濾鏡數(shù)據(jù)變換效果的bug，還是自己js部分由問題，希望誰知道原因可以告訴一聲，不甚感謝！

canvas方法
此方法不依賴任何的JavaScript庫，兼容性強，而且沒有出現(xiàn)一些不知名的問題，我自己是比較喜歡的。為了讓其在IE下也支持canvas標(biāo)簽，需要調(diào)用一個js插件，由Google發(fā)起