工具类应统一用完整transform声明并设transform-origin:center，如.rotate-45{--t-rotate:45deg}.transform{transform:rotate(var(--t-rotate,0))},支持组合与过渡。
transform: rotate() 工具类怎么写才不踩坑
直接用 transform: rotate(45deg) 没问题，但作为工具类必须考虑可复用性、组合性与 CSS 优先级冲突。最常见错误是：旋转后元素脱离文档流导致父容器高度塌陷，或与其他 transform 属性（如 scale、translate）叠加时顺序错乱。
- 工具类名建议带语义前缀，比如
.rotate-45、.rotate--90（双短横表示负值），避免和业务类名冲突 - 所有旋转类必须声明
transform-origin: center，否则默认以左上角为原点，视觉偏移明显 - 不要单独写
rotate()，务必用完整transform声明，否则会覆盖其他 transform 效果（例如已有translateX(10px)的类再加.rotate-30就失效）
如何让 rotate 工具类支持动画过渡
单纯加 transition: transform 0.3s 不够——rotate 本身无过渡效果，必须配合状态切换（如 hover、class 切换）才能触发动画。关键在「触发时机」和「过渡属性粒度」。
- 过渡必须写在基础状态（非 hover 或 active）上，例如：
.rotateable { transition: transform 0.25s ease-in-out; } .rotateable:hover { transform: rotate(180deg); } - 避免写
transition: all，它会把 color、opacity 等无关属性也纳入过渡，影响性能 - 若需 JS 控制旋转角度，推荐用
data-rotate="90"+ CSS 自定义属性驱动：[data-rotate] { transform: rotate(calc(var(--rotate, 0) * 1deg)); }，再用 JS 设置el.style.setProperty('--rotate', '45')
rotate 动画卡顿？检查这三点
CSS 旋转动画卡顿通常不是 rotate 本身的问题，而是渲染层没走 GPU 加速，或布局频繁重排。
- 强制启用硬件加速：在旋转类中加
transform: rotate(45deg) translateZ(0)（translateZ(0)是经典 hack，现代浏览器更推荐will-change: transform） - 确保旋转元素没有
margin或padding参与布局计算——这些属性变化会触发 layout，打断 transform 动画帧 - 避免对
display: inline元素使用 rotate；它可能因行内格式化上下文导致定位异常，优先转为inline-block或block
多个 transform 工具类如何安全组合
比如同时需要 .rotate-90 和 .scale-150，不能简单叠加两个类，因为每个类都只写 transform: rotate(...) 或 transform: scale(...)，后者会完全覆盖前者。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是设计原子 transform 类，全部基于同一个
transform声明，用 CSS 变量拼接：.rotate-90 { --t-rotate: 90deg; } .scale-150 { --t-scale: 1.5; } .transform { transform: rotate(var(--t-rotate, 0)) scale(var(--t-scale, 1)); }，然后元素写class="transform rotate-90 scale-150" - 或者用预处理器（Sass/Less）生成组合类：
.rotate-45.scale-2→ 编译出完整transform: rotate(45deg) scale(2) - 纯 CSS 方案中，也可用
@layer+ 低优先级基础类兜底，但兼容性有限（Chrome 110+）
实际项目里，rotate 工具类最容易被忽略的是 origin 和组合顺序——很多人调完角度就上线，结果在不同尺寸屏幕下旋转中心偏移，或和图标库的内置 transform 冲突。留个心眼：每次加 rotate 类，先检查 computed styles 里的 transform-origin 和最终 transform 字符串是否符合预期。
