transform动画需显式声明transition或animation，不能仅靠hover触发；关键帧中函数数量和类型须一致，且应指定具体属性而非all，配合transform-origin和GPU加速可提升效果与性能。
transform 动画必须用 transition 或 animation 控制，不能直接写在 hover 里“动”
很多人写 hover 时直接加 transform: translateX(10px) rotate(45deg)，发现没动画——因为 transform 本身不触发过渡，必须显式声明 transition 属性。浏览器不知道你希望哪些值变化、花多久、用什么缓动。
正确做法是：在默认状态提前写好 transition，且推荐指定具体属性而非用 all：
button {
transform: scale(1) rotate(0);
transition: transform 0.3s ease-out;
}
button:hover {
transform: scale(1.2) rotate(15deg) translateX(8px);
}-
transition: all 0.3s容易导致意外动画（比如改了color也跟着过渡） - 多个
transform函数写在同一行才生效，顺序影响结果（先 scale 再 rotate 和反过来，视觉不同） - 如果只希望某一个动作有动画（比如只让旋转动，平移不动），得拆成两个元素或用 JS 控制类名
animation 中 transform 值必须保持函数数量和类型一致
用 @keyframes 写动画时，from 和 to（或各关键帧）里的 transform 函数要一一对应，否则浏览器会降级为“跳变”或插值错误。例如下面这段会出问题：
@keyframes bad {
from { transform: translateX(0); }
to { transform: translateX(100px) rotate(360deg); }
}因为 from 只有一个函数，to 有两个，浏览器无法对齐插值维度。正确写法是补全：
立即学习“前端免费学习笔记（深入）”；
@keyframes good {
from { transform: translateX(0) rotate(0); }
to { transform: translateX(100px) rotate(360deg); }
}- 缩放
scale()和旋转rotate()混用时，注意单位：角度用deg，比例无单位 - 避免在关键帧中混用
scaleX和scale，它们不是等价替换，插值行为不同 - 想实现“先平移再旋转”，不能靠顺序，得用嵌套容器——
transform是整体矩阵运算，没有执行时序
性能敏感场景下，优先用 will-change 和 GPU 加速
频繁变化的 transform（尤其是 translateZ(0)、scale、rotate）若未触发硬件加速，滚动或动画可能掉帧。常见卡顿不是代码写错，而是没告诉浏览器“这个元素要动”。
简单有效的方式是加 will-change: transform，但别滥用：
.moving-element {
transform: translateX(0);
will-change: transform;
}-
will-change是提示，不是保证；过度使用反而增加内存开销 - 更稳妥的做法是用
transform: translateZ(0)或translate3d(0,0,0)强制 GPU 层，兼容性更好 - 注意：
position: fixed元素加transform后会脱离固定定位上下文，这是规范行为，不是 bug
rotate 的中心点默认是元素中心，要用 transform-origin 调整
很多旋转效果看起来“歪了”，其实是绕左上角转（比如菜单图标旋转后跑出视口）。transform-origin 决定旋转/缩放的基准点，默认是 50% 50%（即中心），但常需手动设：
.hamburger-icon {
transform: rotate(90deg);
transform-origin: center; /* 等同于 50% 50% */
}
.menu-trigger {
transform: rotate(45deg);
transform-origin: top left; /* 绕左上角转 */
}- 值可以是关键字（
top、bottom）、百分比（25% 75%）或像素（10px 20px） - 设成
0 0和top left效果相同，但前者更简洁 - 如果父容器有
overflow: hidden，旋转后超出部分会被裁剪，此时调transform-origin可能比改布局更轻量
实际项目里最常被忽略的是关键帧中 transform 函数的对齐，以及 transition 没锁定到 transform 属性本身——这两点一错，动画就“不动”或“乱动”。
