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

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

一、 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权威指南 >> 1、第97页 5.4.1 节坐标变换; 2、第18章 CSS3中的变形处理

 

posted @ 2012-10-13 07:14  rentj  阅读(58200)  评论(1编辑  收藏  举报