实现HTML图片旋转，HTML5+CSS3+JS实现旋转图片效果，图片任意角度旋转只支持IE9及以上浏览器，支持谷歌、火狐、safari浏览器。只要支持HTML5的浏览器就能支持本html旋转图片效果。
原始图片与旋转后图片截图旋转图片效果截图
完整HTML代码如下：
- <!DOCTYPEHTML>
- <html>
- <head>
- <title>图片旋转www.divcss5.com</title>
- <scripttype="text/javascript">
- functionstartup(){
- varcanvas=document.getElementById('canvas');
- varctx=canvas.getContext('2d');
- varimg=newImage();
- img.src='divcss5-logo-201305.gif';
- img.onload=function(){
- ctx.translate(img.width/2,img.height/2);
- ctx.rotate(30*Math.PI/120);
- //120为设置旋转角度
- ctx.drawImage(img,0,0,165,60);//165和60分别是图片宽度高度
- }
- }
- </script>
- </head>
- <bodyonload='startup();'>
- <divid="pw_body"style="width:100%;height:100%">
- <canvasid="canvas"style="position:absolute;left:300px;top:100px;"width="800"height="600"></canvas>
- </div>
- <p>部分代码整理于网络</p>
- </body>
- </html>
本html图片旋转是将图片作为网页背景图片进行旋转，但是实际根据需要使用。因为不兼容低版本的IE，所以实用性不是很强。
：
打包下载：
立即下载 （3KB）
DIVCSS5建议：
如果想让图片旋转兼容各大浏览器，建议将图片本身设计出需要的旋转效果，再切图出作为图片或网页背景来使用，这样兼容性好，节约DIV CSS代码。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
新闻热点
疑难解答
