transform: rotate() 无法自适应旋转，因其仅做视觉变换且不感知图片EXIF方向信息；需JS读取Orientation字段后组合transform修正，且rotate必须带单位（如deg），多变换须同句声明并注意顺序与transform-origin状态管理。
直接用 transform: rotate() 无法实现“自适应旋转”——CSS 本身没有自动检测图片方向并修正的功能，所谓“自适应”必须靠 JS 解析 EXIF 或结合用户交互手动控制角度。
为什么 rotate() 不能自动适配手机拍歪的照片
CSS 的 rotate() 是纯视觉变换，它对原始图片数据零感知。手机拍摄的 JPG 常含 EXIF Orientation 字段（如值为 6 表示顺时针旋转 90°），但浏览器默认渲染时已按该字段自动矫正显示——此时你再加 rotate(90deg)，等于叠了两层旋转，图就彻底歪了。
- 用
getComputedStyle(img).transform查不到 EXIF 角度，只返回当前 CSS 变换矩阵 - 想真正“修复歪图”，得用
FileReader+Image对象 +EXIF.js（或现代替代方案如fast-exif）读取元数据 - 读到
Orientation: 6后，不是盲目rotate(90deg)，而是要配合transform-origin和可能的scale(-1, -1)组合修正
rotate() 角度设置必须带单位，常见失效原因
写成 rotate(90) ❌ 完全无效；必须是 rotate(90deg) ✅。其他合法单位还有 rad、turn（如 rotate(0.25turn) 等价于 90°），但 deg 最直观、兼容性最好。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要把
rotate()塞进filter里：filter: blur(1px) rotate(30deg)会忽略rotate - 多个变换要写在同一
transform声明中：transform: scale(1.2) rotate(45deg) translateX(10px)，顺序影响结果 - 内联元素（如默认
img）若旋转后换行错位，加display: block或vertical-align: top
让旋转后图片不撑破容器的三种实际解法
旋转 45° 的 200×200 图片，外接矩形约 283×283，但它的 layout size（文档流占位）仍是 200×200——这是溢出的根本原因。
- 裁剪：父容器加
overflow: hidden，最简单，适合头像、卡片等固定区域 - 缩放适配：手动试值如
transform: rotate(30deg) scale(0.87)；更准的做法是用 JS 计算旋转后外接宽高，反推缩放比 - 预留空间：给父容器加
padding，例如转 30° 预留 30–40px 边距，避免滚动条意外触发
动态调角度时最容易被忽略的状态管理
用按钮控制左/右旋，别每次拼字符串赋值 style.transform，否则会残留旧值或角度越界。必须用变量或 data-rotation 持久化当前角度：
let angle = 0;
rotateRightBtn.onclick = () => {
angle = (angle + 90) % 360;
img.style.transform = `rotate(${angle}deg)`;
};
- 负角度要防负数：
(angle - 90 + 360) % 360保证结果在 0–359 范围内 - 如果图片同时有缩放或平移，
rotate()必须和其他变换一起写进同一句transform，否则会被覆盖 -
transform-origin默认是50% 50%，但一旦改过（比如设成top left），所有后续rotate()都绕新原点，这点在多次点击时极易被遗忘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
