如何用CSS做图片旋转效果
今天教大家如何用CSS在HTML做出图片旋转的效果,图片的任意角度都可以旋转,但是唯一兼容性问题就是不支持IE9以下的浏览器,只要支持H5的浏览器都支持本效果。
完整HTML代码如下:
<!DOCTYPE HTML> <html> <head> <title>图片旋转 在线演示</title> <script type="text/javascript"> function startup() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); 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> <body onload='startup();'> <p id="pw_body" style="width:100%;height:100%"> <canvas id="canvas" style="position: absolute; left: 300px; top: 100px;" width="800" height="600"></canvas> </p> <p>部分代码整理于网络</p> </body> </html>
本html图片旋转是将图片作为网页背景图片进行旋转,但是实际根据需要使用。因为不兼容低版本的IE,所以实用性不是很强。
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
网页中使用h标签的开发经验
怎么优化HTML网页
HTML如何2d和3d转换
以上就是如何用CSS做图片旋转效果的详细内容,更多请关注其它相关文章!