今天教大家如何用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,所以實用性不是很強。
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
網頁中使用h標籤的開發經驗
怎麼最佳化HTML網頁
HTML如何2d和3d轉換