CSS 2D 位移（translate）

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);

• 顺序从左到右执行：先平移，再缩放，最后旋转。
• 变换顺序不同，最终效果可能不同。