如何用CSS做圖片旋轉效果
- php中世界最好的语言原創
- 2018-05-24 15:14:105213瀏覽
今天教大家如何用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中文網其它相關文章！
相關閱讀：
以上是如何用CSS做圖片旋轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css製作好看的搜尋框下一篇：css製作好看的搜尋框