css圖片旋轉

轉：http://blog.csdn.net/jcx5083761/article/details/7840252圖片旋轉效果的一些研究、jQuery外掛程式及執行個體一、前面的嘮叨

圖片的旋轉可以說是一種效果，但是逐漸的，旋轉已經不單單是屬於視覺效果那個範疇，其更具有使用性，功能性。我們都知道，照片有時候是需要橫過來的拍的，當我們預覽或共用到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 網頁瀏覽器中引入。對 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，是款很輕量級的外掛程式，很精巧。可以實現任意角度圖片的旋轉，使用方法也很簡單。例如：$("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發起