图片旋转效果的一些研究、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);

结果与上面的效果一致：
IE下旋转效果

这里，滤镜代码部分，前面长长的大小写错综的部分我们不用管它，看后面的”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下的效果就是：
IE下滤镜旋转60度的效果

这里滤镜参数好像比较多，看得人心里毛毛的，不过呢，拆开来看，也是小家常。

我们要关注的其实就只是这一部分：”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’);

这个矩阵滤镜还可以实现进行缩放，对此不详述。