一、前面的嘮叨

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

二、CSS3與圖片旋轉

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

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

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

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

三、IE濾鏡與圖片旋轉

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

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

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

結果與上面的效果一致：

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

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

先上實例代碼，以下代碼將實現圖片順指針旋轉60度的效果：

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

結果呢，IE6下的效果就是：

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

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

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

例如這里要旋轉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″。所以呢，要實現IE下任意角度圖片的旋轉記住下面的式子就可以了： filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

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

四、CSS3與IE濾鏡圖片旋轉綜合與對比

不管三七二十一，先看一個綜合實例，方便對比。
實現旋轉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" />旋轉90°
<img id="rot135" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋轉135°
        
      

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

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

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

五、canvas標簽與圖片旋轉

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

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

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

這里IE先放在一邊，我們看看如何使用canvas實現旋轉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");
	
          
            //旋轉后canvas標簽的大小
          
          
	canvas.height = 128;
	canvas.width = 96;
	
          
            //繪圖開始
          
          
	var context = canvas.getContext("2d");
	context.save();
	
          
            //改變中心點
          
          
	context.translate(96,0);
	
          
            //旋轉90°
          
          
	context.rotate(Math.PI/2);
	
          
            //繪制
          
          
	context.drawImage(oImg, 0, 0, 128, 96);
	context.restore();
	oImg.style.display = "none";
};

        
      

結果在不支持CSS3 transform的Opera9瀏覽器下：

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

其中鏈接的js文件是使IE瀏覽器也支持canvas標簽的插件JavaScript，能實現大多數canvas標簽實現的效果，圖片的旋轉當然不在話下，您可以試試。

六、旋轉效果jQuery插件

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

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

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

七、圖片旋轉實例

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

不完全兼容的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代碼——根據是向左轉還是向右轉動態改變class的名稱就行了。
這里使用的是CSS3+filter濾鏡的方法，所以低版本的Firefox以目前版本的Opera瀏覽器下式沒有效果的。但絕對適用于90%以上的互聯網用戶了。

jQuery插件實現方法
使用插件一般而言是比較簡單的。但是這里，由于插件js是款相當輕量級的代碼插件，功能有限。如果不做任何特別的處理的話，此插件只支持一次的圖片旋轉效果，因為分析插件可知，當運行一次canvas旋轉后，canvas標簽會將原來的圖片標簽代替掉，使得圖片的連續旋轉遇到麻煩，需要每次旋轉后重新輸入圖片相關的HTML代碼。
上面所述對應的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(); 
          
            //執行向右旋轉
          
          
	return false;
});

        
      

js部分需要調養jQuery庫和此輕量級旋轉 插件

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

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