CSS transform 变换入门：translate、rotate 与 scale

想让一个元素挪个位置、转个角度、放大缩小，很多人第一反应是改 left、top 或者宽高。其实 CSS 专门有一个 transform 属性干这事儿，而且不挤占布局——它变换的是元素的「渲染结果」，周围元素的排布完全不受影响。

translate：平移

translate 沿 X、Y 轴移动元素，参数是长度或百分比：

.box {
  transform: translate(50px, 20px); /* 右移 50px，下移 20px */
  transform: translateX(-30px);     /* 只水平移动，负值向左 */
  transform: translateY(10%);       /* 百分比相对自身尺寸 */
}

配合 HTML 看效果：

<div style="width:100px;height:100px;background:#4a90d9;
            transform:translate(50px,20px);"></div>

页面上的蓝色方块会整体往右下偏移，但它原来占的位置还留着，不会把后面的内容挤走。

rotate：旋转

rotate 让元素绕中心点转圈，单位是 deg（度）：

.box {
  transform: rotate(45deg);  /* 顺时针转 45 度 */
  transform: rotate(-90deg); /* 负值为逆时针 */
}

一个常见用途是给装饰性小图形摆角度，比如让「NEW」标签斜着贴在商品图角上。

scale：缩放

scale 按倍数缩放元素，1 是原大小：

.box {
  transform: scale(1.2); /* 放大到 1.2 倍 */
  transform: scale(0.5); /* 缩小到一半 */
  transform: scaleX(2);  /* 只横向拉伸 */
}

注意 scale 不会改变布局尺寸：元素占位还是原来的 100px，只是画出来的变大或变小了。

多个变换可以叠加

一个 transform 里写多个函数，中间用空格隔开，从左到右依次生效：

.box {
  transform: translate(40px, 0) rotate(15deg) scale(1.1);
}

顺序是有影响的：先平移再旋转，和先旋转再平移，结果可能不一样。拿不准就按「平移 → 旋转 → 缩放」的顺序写，最符合直觉。

经典搭配：hover 时轻微上浮

transform 最常见的实战场景是配合过渡效果做交互反馈：

.card {
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-4px);
}

鼠标移上去，卡片轻轻上浮 4 像素。因为 transform 变化不触发重排，动画非常流畅，比直接改 top 值的方案性能好得多。想系统了解过渡，可以接着读站里的《CSS 过渡与动画入门》。

小结

• transform 变换的是渲染结果，不挤占布局，性能也好
• translate 平移、rotate 旋转（单位 deg）、scale 缩放（倍数）
• 多个变换用空格叠加，顺序会影响结果
• 悬浮上浮、角标倾斜、按钮放大，都是 transform 的典型用法

学会 transform，页面的「动效感」就有了一半，剩下的一半交给 transition。