最简单实现图片旋转是用CSS transform: rotate(45deg)，需带deg单位，默认以中心为原点，可配合transform-origin调整，加transition实现平滑过渡。
用 CSS transform: rotate() 最简单实现图片旋转
HTML5 本身没有专门的“图片旋转”标签或 API，实际靠 CSS 的 transform 属性完成。只要给
常见错误是试图用 rotate() 直接写在 HTML 的 style 里却忘了加单位（deg）或浏览器前缀（现代浏览器基本不用了）：
@@##@@
- 角度必须带单位：
rotate(90)❌，rotate(90deg)✅ - 默认以元素中心为旋转原点，想改用
transform-origin（如top left） - 若图片父容器有
overflow: hidden，旋转后超出部分会被裁剪
JavaScript 动态控制图片旋转角度
需要用户点击/拖拽/定时旋转时，就得用 JS 操作 style.transform。注意：不能直接赋值 rotate(…)，得拼完整字符串，且要覆盖其他 transform 操作（如缩放、平移）。
推荐做法是用 style.transform = `rotate(${angle}deg)`，而不是追加——否则旧值残留会导致错乱：
立即学习“前端免费学习笔记（深入）”；
const img = document.querySelector('img');
let angle = 0;
function rotateBy15() {
angle += 15;
img.style.transform = `rotate(${angle}deg)`;
}- 多次调用
rotate()不会叠加，因为每次都是全新赋值 - 若同时用了
scale()或translate()，需合并写：transform: rotate(30deg) scale(1.2) - 想顺滑过渡？加
transition: transform 0.3s ease到 img 样式中
Canvas 中 drawImage 配合 rotate 实现像素级旋转
当必须导出旋转后的图片（比如生成分享图）、或要做图像处理（旋转+裁剪+再绘制），就得用 。这里容易卡在坐标系变换上：Canvas 的 rotate() 是绕画布原点（左上角）转，不是绕图片中心。
正确流程是三步：移动原点 → 旋转 → 绘制（并注意负偏移抵消）：
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
const cx = canvas.width / 2;
const cy = canvas.height / 2;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(45 * Math.PI / 180);
ctx.drawImage(img, -img.width/2, -img.height/2);
ctx.restore();
};-
rotate()参数是弧度，不是度数，别漏了Math.PI / 180 - 必须用
ctx.save()/ctx.restore()包裹，否则后续绘图全被旋转影响 -
drawImage的 x/y 要设为负半宽高，才能让图片中心对准旋转中心
旋转后图片变形、模糊或锯齿怎么处理？
CSS 旋转本身不改变像素，但浏览器渲染时可能触发 subpixel 插值，导致边缘发虚；Canvas 旋转绘图则默认用双线性插值，小图旋转后容易糊。
- CSS 方案：加
image-rendering: pixelated（适合像素风图），或will-change: transform提升到合成层减少重绘抖动 - Canvas 方案：设置
ctx.imageSmoothingEnabled = false关闭抗锯齿（适合 icon 或线条图） - 真正要导出高清旋转图？得用
canvas.toDataURL('image/png', 1)，并确保 canvas 尺寸足够大（比如 2x 原图尺寸再缩放显示）
最常被忽略的是：CSS 旋转不影响 DOM 布局流，但会影响事件点击区域——旋转 90° 后，鼠标点原位置可能点不到图。如需精确交互，得用 getBoundingClientRect() + 矩阵逆变换算真实坐标。
