HTML不支持图片旋转或裁剪，须用CSS（transform、clip-path）或JavaScript（Canvas）实现；CSS旋转不改变布局占位，裁剪需注意坐标系顺序；Canvas可导出真正旋转裁剪后的新图。
HTML 本身不支持图片旋转或裁剪——它只是结构标记语言，所有视觉变换必须靠 CSS 或 JavaScript 配合实现。直接写 <img rotate="90"> 是无效的。
用 CSS transform 旋转图片但不改变布局流
常见误区是以为旋转后图片尺寸会自动重算，其实 transform: rotate() 只是视觉变换，原元素占位框（bounding box）不变，可能导致溢出或遮挡。
- 用
transform: rotate(45deg)时，父容器需加overflow: hidden才能“视觉裁剪”超出部分 - 若要让旋转后的图片居中显示，别只靠
margin: auto，得配合transform-origin和position: relative调整锚点 - 旋转后想保持宽高比缩放，不能只设
width，应改用max-width: 100%+height: auto，否则拉伸失真
用 clip-path 实现任意形状裁剪（含旋转后裁剪）
clip-path 是目前最轻量、纯 CSS 的裁剪方案，支持多边形、椭圆、甚至 path() 路径。但它对旋转后的图片生效时，坐标系仍是原始未旋转的——所以先旋转再裁剪，顺序很关键。
- 正确顺序：
transform: rotate(30deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)—— 旋转影响渲染位置，clip-path始终基于元素原始坐标系裁剪 - 想按旋转后视角裁剪？得用 SVG
<clippath></clippath>配合<g transform="rotate(30)"></g>，更可控但代码略长 - 注意兼容性：
clip-path在 Safari 旧版需加-webkit-clip-path，且不支持path()函数（仅 Firefox 和 Chrome 117+ 支持）
用 Canvas 实现像素级旋转+裁剪（真正可导出新图）
如果目标是生成一张旋转并裁剪后的新图片（比如用户上传头像后保存为正向矩形），CSS 不行，必须用 <canvas></canvas>。
- 关键步骤：创建 canvas → 获取 2D 上下文 →
ctx.translate()移动原点到中心 →ctx.rotate()→ctx.drawImage()绘制（此时图像已绕中心旋转）→canvas.toDataURL()导出 - 裁剪不是靠隐藏，而是控制
drawImage()的sx, sy, sWidth, sHeight参数，从旋转后的源图中截取指定区域 - 容易漏掉的坑：
canvas.width/height必须显式设为足够容纳旋转后图像的尺寸（比如原图 200×200，旋转 45° 后最小外接矩形约 283×283），否则内容被截断
真正难的不是旋转或裁剪单独实现，而是两者叠加时的坐标系理解——CSS 的 transform 不改变盒模型，Canvas 的 rotate() 会改变绘图上下文原点，而用户心里想的“裁剪”往往默认以旋转后视觉为准。这点不厘清，调半天也出不来想要的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
