html5+CSS3旋轉(zhuǎn)圖片

2020-03-24 17:35:33

字體：大中小

供稿：網(wǎng)友

實(shí)現(xiàn)HTML圖片旋轉(zhuǎn)，HTML5+CSS3+JS實(shí)現(xiàn)旋轉(zhuǎn)圖片效果，圖片任意角度旋轉(zhuǎn)只支持IE9及以上瀏覽器，支持谷歌、火狐、safari瀏覽器。只要支持HTML5的瀏覽器就能支持本html旋轉(zhuǎn)圖片效果。

圖片旋轉(zhuǎn)效果截圖
原始圖片與旋轉(zhuǎn)后圖片截圖旋轉(zhuǎn)圖片效果截圖

完整HTML代碼如下：

<!DOCTYPEHTML>
<html>
<head>
<title>圖片旋轉(zhuǎn)www.divcss5.com</title>
<scripttype="text/javascript">
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為設(shè)置旋轉(zhuǎn)角度
ctx.drawImage(img,0,0,165,60);//165和60分別是圖片寬度高度
}
}
</script>
</head>
<bodyonload='startup();'>
<divid="pw_body"style="width:100%;height:100%">
<canvasid="canvas"style="position:absolute;left:300px;top:100px;"width="800"height="600"></canvas>
</div>
<p>部分代碼整理于網(wǎng)絡(luò)</p>
</body>
</html>

本html圖片旋轉(zhuǎn)是將圖片作為網(wǎng)頁背景圖片進(jìn)行旋轉(zhuǎn)，但是實(shí)際根據(jù)需要使用。因?yàn)椴?a href='http://www.survivalescaperooms.com/tag/jianrongmoshi_8503_1.html' target='_blank'>兼容低版本的IE，所以實(shí)用性不是很強(qiáng)。

：

打包下載：

立即下載（3KB）

DIVCSS5建議：
如果想讓圖片旋轉(zhuǎn)兼容各大瀏覽器，建議將圖片本身設(shè)計(jì)出需要的旋轉(zhuǎn)效果，再切圖出作為圖片或網(wǎng)頁背景來使用，這樣兼容性好，節(jié)約DIV CSS代碼。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS white

下一篇：DIV CSS布局