软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 网页中实现图片旋转的几种实现方式

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

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

一、 ie 滤镜

IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。

浏览器支持: IE5.5+

CSS代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

JS代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
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代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
.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代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
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 旋转演示(IE9/Chrome/FireFox):


提示:可修改后代码再运行!

三、 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代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
context = canvas.getContext("2d")
context.rotate(90 * Math.PI / 180);
context.drawImage(img, 0, -img.height);

坐标旋转示意图:

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

HTML5 canvas rotate旋转演示:


提示:可修改后代码再运行!

    相关阅读
    网友评论