网站地图    收藏   

主页 > 前端 > css教程 >

html5+CSS3旋转图片-html图片旋转

来源:未知    时间:2014-10-30 10:06 作者:xxadmin 阅读:

[导读] 实现HTML图片旋转,HTML5+CSS3+JS实现旋转图片效果,图片任意角度旋转只支持IE9及以上浏览器,支持谷歌、火狐、safari浏览器。只要支持HTML5的浏览器就能支持本html旋转图片效果。 原始图...

实现HTML图片旋转,HTML5+CSS3+JS实现旋转图片效果,图片任意角度旋转只支持IE9及以上浏览器,支持谷歌、火狐、safari浏览器。只要支持HTML5的浏览器就能支持本html旋转图片效果。

图片旋转效果截图
原始图片与旋转后图片截图 旋转图片效果截图

完整HTML代码如下:


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <title>图片旋转 在线演示 www.divcss5.com</title> 
  5. <script type="text/javascript">  
  6. function startup() {  
  7. var canvas = document.getElementById('canvas');  
  8. var ctx = canvas.getContext('2d');  
  9. var img = new Image(); 
  10. img.src = 'divcss5-logo-201305.gif'
  11. img.onload = function() { 
  12. ctx.translate(img.width / 2, img.height / 2);  
  13. ctx.rotate(30 * Math.PI / 120);  
  14. // 120为设置旋转角度 
  15. ctx.drawImage(img, 0, 0, 165, 60); // 165和60分别是图片宽度高度 
  16. }  
  17. }  
  18. </script> 
  19. </head> 
  20. <body onload='startup();'> 
  21. <div id="pw_body" style="width:100%;height:100%"> 
  22. <canvas id="canvas" style="position: absolute; left: 300px; top: 100px;" width="800" height="600"></canvas> 
  23. </div> 
  24. <p>部分代码整理于网络</p> 
  25. </body> 
  26. </html> 

本html图片旋转是将图片作为网页背景图片进行旋转,但是实际根据需要使用。因为不兼容低版本的IE,所以实用性不是很强。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论