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

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

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

完整HTML代码如下：

图片旋转在线演示www.divcss5.com
functionstartup(){
    
varcanvas=document.getElementById('canvas');
    
varctx=canvas.getContext('2d');
    
varimg=newImage();
    
img.src='divcss5-logo-201305.gif';
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分别是图片宽度高度
}
}
    
部分代码整理于网络

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

在线演示：查看案例

打包下载：

立即下载 （3KB）

DIVCSS5建议：
如果想让图片旋转兼容各大浏览器，建议将图片本身设计出需要的旋转效果，再切图出作为图片或网页背景来使用，这样兼容性好，节约DIV CSS代码。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！