CSS3 transform 适合先从哪些交互开始

在 CSS3 逐渐进入日常开发之后，很多前端会先接触到 transition，然后很快就会继续碰到 transform。它真正让人眼前一亮的地方，是页面元素终于不只是“换颜色”，还可以更自然地移动、缩放和旋转。

最适合入门的其实是 hover 细节

一开始没必要上来就做复杂动画。按钮轻微上移、卡片略微放大、图标旋转一点点，这些小动作最容易体现 transform 的价值，而且也不容易把页面做得太花。

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
}

这种效果在 2013 年已经会让页面显得比纯静态布局更细腻。

translate 和 scale 往往最常用

如果只是做基础交互，最常见的通常就是：

• translate 负责位置微调
• scale 负责轻微放大缩小
• rotate 负责图标或箭头方向变化

把这几个掌握住，很多导航、按钮、缩略图效果就够用了。

动效幅度不要太大

CSS3 新能力刚流行时，很容易出现另一个倾向：因为终于能做动效了，于是什么都想飞一下、转一下。实际页面里，动效的价值更多是提示交互状态，而不是抢内容注意力。特别是 hover 效果，幅度太大反而会显得不稳。

让动效服务结构，而不是盖过结构

我更喜欢把 transform 当成一种辅助表达。比如卡片悬停时轻微抬起，说明它可点击；箭头旋转，说明面板状态切换了。只要能把交互意图表达清楚，这个动效就已经有价值。

小结

CSS3 transform 在 2013 年最值得先学的，不是炫技式动画，而是那些能让按钮、卡片、面板更顺手的小交互。把它用在合适的地方，页面会明显更有层次，但又不会失去稳重感。