CSS 2D 位移（translate）
一、基本语法
css
transform: translate(x, y);
| 参数 | 说明 |
|---|---|
x |
水平方向位移距离（正值向右，负值向左） |
y |
垂直方向位移距离（正值向下，负值向上） |
单位支持：px、%、em、vh/vw 等。
二、三种常用写法
| 写法 | 示例 | 说明 |
|---|---|---|
| 两个值 | translate(100px, 50px) |
水平移动 100px，垂直移动 50px |
| 一个值 | translate(100px) |
只水平移动，垂直不变（等同于 translate(100px, 0)） |
| 单方向函数 | translateX(100px) |
仅水平移动 |
translateY(50px) |
仅垂直移动 |
三、百分比单位的特点
css
transform: translate(50%, 50%);
- 百分比相对于元素自身的宽度和高度，而非父容器。
- 例如元素宽度 200px，
translateX(50%)表示向右移动 100px（自身宽度的一半）。 - 常用于水平垂直居中技巧（配合
position: absolute; left: 50%; top: 50%;）。
四、位移的作用
| 应用场景 | 说明 |
|---|---|
| 微调元素位置 | 不改变文档流，不影响其他元素布局 |
| 制作动画效果 | 配合 transition 或 animation，实现平滑移动 |
| 鼠标悬停反馈 | :hover 时位移，增强交互感 |
| 图片轮播/滑动 | 通过位移切换显示内容 |
| 错位/抖动效果 | 随机位移制造趣味性 |
五、与 position 定位的区别
| 对比项 | transform: translate() |
position: relative/absolute |
|---|---|---|
| 是否脱离文档流 | ❌ 不脱离（原占位保留） | ✅ 脱离（absolute/fixed 脱离；relative 保留） |
| 性能 | 更高（GPU 加速，仅合成层重绘） | 较低（可能触发回流） |
| 影响其他元素 | 不影响 | 可能影响 |
| 百分比参照 | 自身尺寸 | 父容器尺寸（top/left） |
| 动画友好度 | 非常适合 | 一般（absolute 动画可能引发回流） |
六、代码示例
基础位移
css
.box {transform: translate(50px, 100px); /* 右移50px，下移100px */
}
悬停动画
css
.box {transition: transform 0.3s ease;
}
.box:hover {transform: translateY(-10px); /* 悬停时向上浮起10px */
}
水平垂直居中（经典技巧）
css
.parent {position: relative;
}
.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /* 相对于自身宽高偏移 -50% */
}
七、位移的复合写法
多个变换可以组合使用（注意顺序影响结果）：
css
transform: translate(100px, 50px) scale(1.2) rotate(45deg);
- 顺序从左到右执行：先平移，再缩放，最后旋转。
- 变换顺序不同，最终效果可能不同。