如何用CSS做圖片旋轉效果

來源:互聯網
上載者:User
今天教大家如何用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轉換

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.