网页中图片旋转一般有下面三种常见的实现方式：
一、 ie 滤镜
IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。
浏览器支持： IE5.5+
CSS代码：
.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
JS代码：
element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
IE滤镜旋转演示：
二、 CSS3 transform
css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。
浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
CSS代码：
.rotate{
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
JS代码：
element.style.webkitTransform="rotate(-90deg)" element.style.MozTransform="rotate(-90deg)" element.style.msTransform="rotate(-90deg)" element.style.OTransform="rotate(-90deg)" element.style.transform="rotate(-90deg)";
css3 tranform rotate 旋转演示：
三、 HTML5 canvas rotate
使用canvas 2d绘图上下文对象的context.rotate(angle)方法，通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点时画布的左上角。角度转换弧度的公式为：弧度 = 角度 * Math.PI / 180。
浏览器支持：Chrome 1.0+、Firefox 1.5+、Opera 9.0+、Safari 1.3+ 、IE 9+
JS代码：
context = canvas.getContext("2d")
context.rotate(90 * Math.PI / 180);
context.drawImage(img, 0, -img.height);
坐标旋转示意图：
HTML5 canvas rotate旋转演示：
DEMO:
参考：
<<HTML5与CSS3权威指南