网页中图片旋转的几种实现方式

原文章地址：http://biancheng.dnbcw.info/javascript/427943.html

网页中图片旋转一般有下面三种常见的实现方式：

一、 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滤镜旋转演示：

	 rotate clear filter
    三星 galaxy note 10.1 

	rotation=0，旋转0度





    
    

二、 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旋转演示：

HTML5秘籍/图灵程序设计丛书