利用filter进行图片的旋转

在高级浏览器里面可以利用css3实现图片的旋转，可是对于IE来讲，需要利用filter属性。。

利用filter进行旋转：

（1）如果只用旋转90度，那么可以直接用BasicImage(rotation=参数)来实现，其中参数为：

        0：不旋转；1：90度 ;2：180度；3：270度

        例子，旋转-90度，那么代码如下：

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

        支持CSS3的：-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg);

（2）如果旋转的角度任意，那么需要利用Matrix，设置其中的M11,M12,M21,M22四个值，他们分别表示水平旋转和垂直旋转的值。按照图片旋转的算法原理，

　　　M11 = cos(度数) ，M12 = -sin(度数)，M13= sin(度数)，M14=cos(度数)

         <script>

          var deg2radians = Math.PI / 180; //（度数与弧度的转化）
          var rad = deg * deg2radians; //deg是需要旋转的度数
          var sin = Math.sin(rad);
          var cos = Math.cos(rad);

          //设置css属性

         

          obj.css({
                'filter':[
　　　　　　　　'progid:DXImageTransform.Microsoft.Matrix(M11="',
　　　　　　　　　　　　　　cos,
　　　　　　　　　　　　'", M12="',
　　　　　　　　　　　　　　-sin,
　　　　　　　　　　　　'", M21="',
　　　　　　　　　　　　　　sin,
　　　　　　　　　　　　'", M22="',
　　　　　　　　　　　　　　cos,
　　　　　　　　　　　　'", sizingMethod="auto expand")'
　　　　　　　　].join(''),
　　　　　'left': l+(w-h)/2+'px',
　　　　　'top':t-(w-h)/2+'px'
　　　　});

         </script>

其中红色的两行是针对IE浏览器做的对图片的调整（ie6,7,8,9通过测试），由于filter在做图片旋转的时候，坐标取的是图片坐标系，即为图片的左上角，而CSS3的rotate进行了转换，最后看到的图片是按数学坐标系，即图片的中心位置进行的旋转。所以为了保证在所有浏览器中的效果一直，需要在IE中，进行图片的移动。

l:对象的left值（相对于父元素）

t:对象的top值（相对于父元素）

w:对象的宽度

h:对象的高度

由于利用了left,top来进行图片的移动，所以进行旋转的图片需要设置position:absolute属性。这样才能使得left值和top值有效。

最后script代码中的css的设置方法利用了QWrap提供的接口。

 

ps:

图片在窗口边缘时，旋转会导致图片溢出窗口，例如

 

 旋转后：

 

 PS:

在ie 中，每旋转一次，得到的图片宽度和高度都会随着图片的旋转而变化。如果需要连续的旋转，就需要考虑到这点。

例如，一个正常的图片宽：500px,高:400px。在ff,chrom浏览器中，用css3旋转，不管旋转多少度，得到的图片的宽度依然是500px,高度是400px

而在ie中，旋转90度以后，重新获得图片的高度为500px,宽度为400px。这就造成上面介绍的在filter中重新设置图片的l,t值出现误差，最后的解决方法是

/*比较原始图片的宽度和高度值得大小,从而设置不同的left和top值*/

var w = img.w;//每次旋转重新得到图片的宽度

var h = img.h;//每次旋转重新得到图片的高度

var ll = W > H ? l+(w-h)/2+'px': l-Math.abs((w-h)/2)+'px';//W：图片的原始宽度，H图片的原始高度

var tt = W > H ? t-Math.abs((w-h)/2)+'px': t-(w-h)/2+'px';

 'left': ll,

'top': tt,
'filter':[
　　'progid:DXImageTransform.Microsoft.Matrix(M11="',
　　cos,
　　　　'", M12="',
　　-sin,
　　　　'", M21="',
　　sin,
　　　　'", M22="',
　　cos,
　　　　'", sizingMethod="auto expand")'
　　].join('')