transform 中 rotate 和 scale 可在同一声明中用空格分隔，顺序决定执行先后；必须合并书写，否则后声明会覆盖前声明；动画中各关键帧需完整写出 transform 值且函数顺序一致。
transform 里 rotate 和 scale 怎么一起用
直接在 transform 值里写多个函数，用空格分隔就行，顺序很重要：先写的先执行。比如 transform: rotate(45deg) scale(1.2) 是先旋转再缩放；反过来写就是先缩放再旋转，视觉结果可能完全不同。
常见错误是把两个 transform 声明叠在一起，比如：
div { transform: rotate(30deg); transform: scale(1.5); }
这样后面那条会完全覆盖前面的，最终只生效 scale(1.5)。必须合并成一条声明。
- 缩放和旋转都支持单位：
rotate()用deg、rad或turn；scale()是无单位数值，scale(0.5)表示缩小一半 - 想绕非中心点旋转？加
transform-origin，比如transform-origin: top left - 动画中频繁修改
transform性能较好，浏览器会走合成层，比改left/top更稳
@keyframes 里怎么定义旋转+缩放的全过程
@keyframes 里每一帧的 transform 都得写全，不能只写变化的部分。比如从 0° 缩放 1x 到 360° 缩放 1.3x，就得明确写出起止状态：
立即学习“前端免费学习笔记（深入）”；
@keyframes spinAndGrow {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.3);
}
}
如果中间要加缓动或停顿，用百分比关键帧更可控：
@keyframes spinAndGrow {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.5); }
100% { transform: rotate(360deg) scale(1); }
}
- 别漏写单位 ——
rotate(360)不合法，必须是rotate(360deg) -
scale()支持单参数（x/y 同值）或双参数（scale(1.2, 0.8)），后者可实现压扁/拉伸效果 - 动画中突然跳变？检查各帧的
transform函数顺序是否一致，顺序不一致会导致插值异常
animation 属性怎么配才能让 transform 动起来
光有 @keyframes 不行，还得用 animation 把它挂到元素上。最简配置至少包含三部分：animation-name、animation-duration、animation-timing-function。
div {
animation: spinAndGrow 2s ease-in-out infinite;
}
这条语句等价于：
animation-name: spinAndGrowanimation-duration: 2sanimation-timing-function: ease-in-outanimation-iteration-count: infinite
容易被忽略的是 animation-fill-mode：默认动画结束就回退到初始样式。如果希望停在最后一帧，得加 animation-fill-mode: forwards。
- 想让动画点击触发而不是自动播？先把
animation-play-state设为paused，再用 JS 切换为running - 多个动画叠加？用逗号分隔，比如
animation: spin 2s, pulse 1.5s，但要注意它们共用 timing-function 和 iteration-count，除非显式分开写 - 硬件加速提示：给动画元素加
transform: translateZ(0)或will-change: transform，可强制提升图层，但别滥用
为什么旋转缩放动画卡顿或边缘模糊
卡顿通常不是因为 transform 本身，而是触发了重排（reflow）—— 比如动画过程中同时改了 width、height 或 margin。缩放后边缘发虚，大概率是元素没对齐像素网格，尤其在非整数缩放（如 scale(1.23)）时明显。
- 解决模糊：加
transform: scale(1.23) translateZ(0)，或用image-rendering: pixelated（仅对图片有效） - 避免卡顿：确保动画只涉及
transform和opacity，不要在动画中读取offsetWidth等触发重排的属性 - 缩放太大时文字失真？那是字体渲染机制问题，可尝试加
backface-visibility: hidden强制启用 GPU 渲染
真正难调的不是语法，而是不同缩放倍数下像素对齐的细微偏差，以及多层嵌套 transform 的累积误差。动手前先想清楚：这个变形是纯视觉反馈，还是会影响后续布局？后者就得谨慎评估副作用。
