網頁中圖片旋轉的幾種實現方式

本文轉載自查看原文 2012-10-13 07:14 54215 前端技術

網頁中圖片旋轉一般有下面三種常見的實現方式：

一、 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濾鏡旋轉演示：

<!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://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0"><img style="border:none" src='http://img1.gtimg.com/digi/pics/hv1/72/143/1111/72279312.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://s.click.taobao.com/t_8?e=7HZ6jHSTbIWYKA1Nkch%2BmIw66j0vo3r3FmWt1QTQz2JsyA%3D%3D&p=mm_10844584_0_0">三星 galaxy note 10.1</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>

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

<!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.amazon.cn/gp/product/B006GYJ5LY/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B006GYJ5LY&linkCode=as2&tag=buyed-23"><img src="http://ec4.images-amazon.com/images/I/410Ve1e79CL._SL500_AA300_.jpg" /></a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B006GYJ5LY" 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; }; element.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,30); }; }()); </script> </body> </html>

三、 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旋轉演示：

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>HTML5 canvas rotate</title> </head> <body> <a href="http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23">HTML5秘籍/圖靈程序設計叢書</a><img src="http://www.assoc-amazon.cn/e/ir?t=buyed-23&l=as2&o=28&a=B009DFCZAQ" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br> <script> (function(){ var canvas = document.createElement("canvas"); canvas.style = "border:1px solid #ccc" var context = canvas.getContext("2d"); var img = new Image(); if(context == null){ return; } img.src="http://img1.douban.com/lpic/s11190661.jpg"; img.onload = function(){ var length = Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));//計算畫布大小，取圖形的對角線，否則旋轉時可能隱藏掉部分內容 canvas.width = length; canvas.height = length; //context.strokeRect(0, 0, length, length); context.translate(canvas.width/2, canvas.height/2);//平移坐標原點到畫布中心 //context.rotate(30 * Math.PI / 180); context.drawImage(this, (-this.width / 2), ( -this.height / 2 )); timer = setInterval(rotate, 50); } var r = 0; var i = 1; function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1;//左右擺動25度 context.save();//保存坐標抽狀態 context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height); context.rotate(r * Math.PI / 180); context.drawImage(img, (-img.width / 2), ( -img.height / 2 )); //把圖片填充到畫布中心 context.restore() //還原坐標抽狀態 }; //綁定事件 canvas.onmouseover = function(){ clearInterval(timer); timer = null; }; canvas.onclick = function(){ location.href= "http://www.amazon.cn/gp/product/B009DFCZAQ/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009DFCZAQ&linkCode=as2&tag=buyed-23"; }; canvas.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,50); }; document.body.appendChild(canvas); }()); </script> </body> </html>

DEMO:

點擊這里查看微博中圖片放大、縮小、旋轉的演示

參考：

<<HTML5與CSS3權威指南 >> 1、第97頁 5.4.1 節坐標變換； 2、第18章 CSS3中的變形處理

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 在.Net中實現HTML生成圖片或PDF的幾種方式 imageview旋轉的幾種方式在各類瀏覽器中實現網頁任意角度的旋轉網頁布局的幾種方式 React中插入圖片的幾種方式 vue中引入圖片的幾種方式 js實現圖片旋轉網頁瀑布流效果實現的幾種方式【工具篇】在.Net中實現HTML生成圖片或PDF的幾種方式 ios中圖片旋轉