Transform 变换

Transform 改变元素的绘制坐标，不重新安排普通流中的其他元素。translate 移动、scale 缩放、rotate 旋转、skew 倾斜；组合顺序会影响最终矩阵和视觉结果。

.card:hover {
  transform: translateY(-4px) scale(1.02);
  transform-origin: center;
}

变换后的元素原有布局占位通常不变，可能覆盖邻居；它还可能创建新的层叠上下文和包含块。不要用 transform 修复本该由布局解决的间距，也不要把所有 transform 都自动称为“上 GPU”。最终性能取决于属性、宿主、图层和实际绘制成本。

实验与练习

将一个卡片分别用 margin 和 transform: translate 向上移动，观察邻居是否重新排布。改变两个 transform 函数的顺序，记录结果差异；再检查 z-index 和层叠上下文变化。

可运行微实验：区分状态、时间线与合成

为同一元素分别添加 transition、keyframes 和 transform。记录触发条件、持续时间、动画是否可逆、是否影响布局；打开 Performance 面板观察只改 transform 与同时改 width/top 的差异，并在 prefers-reduced-motion: reduce 下验证降级。

常见错误

• 用 transform 代替真实布局，导致点击区域和视觉位置难以解释。
• 忽略变换后的覆盖和新的层叠边界。
• 认为 transform 任意使用都比改变布局属性更快。

继续阅读

下一篇比较线性、加速和弹簧感的速度变化：缓动函数。

练习

1. 用最小输入复现“Transform 变换”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案