html5中实现对图片的旋转

其实在js中也是一样的，

• 首先是代码：
  Firefox下：
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);//chrome下用此行，因为chrome浏览器用的是webkit的内核
ie 下：
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

• 当然，以上代码只适合在只旋转固定角度的时候使用，而当需要自己任意设定旋转角度的时候，就需要自己编写js代码了。而使用js代码控制图片旋转也可以有两种方式：

  • 1、transform:rotate(30deg);也就是使用网上流行的JQueryRotate.js来实现（示例，其实网上示例很多，我只是选取了一个我认为讲得还可以的），其本质就是使用canvas画布来把图片按照要求重新画一遍。其实完全可以根据自己的需要自己编写一个JQueryRotate.js来调用，这样可扩展性也就大大增强了。

  • 2、第二种方式就是使用transform: matrix(a, b, c, d, e, f);来实现，这种方法虽然看似困难，也比第一种复杂；但是当开始熟练使用matrix这个东西之后，你就会发现，其实没有那么多图片处理方法需要记了。有这一个就完全够了。