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

发布时间：2018-10-03 16:29 所属栏目：30 来源：站长网

导读：网页中图片旋转一般有下面三种常见的实现方式：一、 ie 滤镜 IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度

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

一、 ie 滤镜

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

浏览器支持： IE5.5+

CSS代码：

Copy to Clipboard Liehuo.Net Codes

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

JS代码：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";

IE滤镜旋转演示：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ie-filter-rotate</title> </head> <body> <div id="odiv" style="position:absolute; left:270px; top:45px;" > <a href="http://www.veryhuo.com/"><img style="border:none" src='http://www.aspzz.cn/uploads/allimg/181003/16315322J_0.jpg' /></a> </div> <p style="line-height:1.5em"> <button onclick="rotate()"> rotate</button> <button onclick="odiv.style.filter=''">clear filter</button> <a href="http://www.veryhuo.com/">最火软件站</a> <br /> <span id="info">rotation=0，旋转0度</span> </p> <br/> <script> var i=0; function rotate(){ var oDiv = document.getElementById("odiv"); if( !document.body.filters ){ alert("这个浏览器不支持滤镜"); return; } i>=3 ? i=0 : i++; oDiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (i) +')'; document.getElementById("info").innerHTML= "rotation="+ i + "，旋转"+ (i*90) + "度" } </script> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

二、 CSS3 transform

css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

CSS代码：

Copy to Clipboard Liehuo.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 Clipboard Liehuo.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）：

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>css 3 transform rotate</title> <style> a img{ border:none} </style> </head> <body> <div id="rotate" style=" cursor:pointer; position:absolute; left:100px; top:100px"> <a href="http://www.veryhuo.com"><img src="http://www.veryhuo.com/uploads/common/images/wall1.jpg" /></a><img src="http://www.veryhuo.com/uploads/common/images/wall1.jpg" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> </div> <script> (function(){ var element = document.getElementById("rotate"); var r = 0; var i = 1; function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1 element.style.MozTransform = "rotate(" + r + "deg)"; element.style.webkitTransform ="rotate(" + r + "deg)"; element.style.msTransform = "rotate(" + r + "deg)"; element.style.OTransform = "rotate(" + r + "deg)"; element.style.transform = "rotate(" + r + "deg)"; } var timer = setInterval(rotate,50); element.onmouseover = function(){ clearInterval(timer); timer = null; }; // veryhuo.com element.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,30); }; }()); </script> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

三、 HTML5 canvas rotate

（编辑：ASP站长网）