今天教大家如何用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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
178
