今天教大家如何用CSS在HTML做出图片旋转的效果，图片的任意角度都可以旋转，但是唯一兼容性问题就是不支持IE9以下的浏览器，只要支持H5的浏览器都支持本效果。

  完整HTML代码如下：

  <pre class="brush:js;toolbar:false">

图片旋转 在线演示

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分别是图片宽度高度
}
}

<p id="pw_body" style="width:100%;height:100%">

  部分代码整理于网络

</pre></p>
  

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

  相信看了这些案例你已经掌握了方法css旋转，更多精彩请关注php中文网其它相关文章！