CSS Transform Translate 是用来对元素进行平移变换的属性，它可以直接改变元素在页面中的视觉位置，且不会影响文档流的正常布局，是前端实现元素定位和轻量动画的常用方案。
Translate 基本语法
Translate 是 transform 属性的一个函数值，支持一维、二维、三维的平移设置，常见语法如下：
translateX(x)：沿水平方向平移，x 为正则向右，为负则向左translateY(y)：沿垂直方向平移，y 为正则向下，为负则向上translate(x, y)：同时设置水平和垂直方向平移，y 可省略，省略时默认值为 0translateZ(z)：沿 Z 轴平移，需要配合 perspective 属性才能看到 3D 效果translate3d(x, y, z)：同时设置三个方向的平移
平移的单位可以是 px、%、rem 等，其中百分比是相对于元素自身的宽高计算的，比如 translateX(50%) 表示元素向右移动自身宽度的一半。
Translate 和传统定位的区别
很多开发者会混淆 Translate 和 position 定位的作用，两者的核心差异如下：
| 对比项 | Translate | position 定位 |
|---|---|---|
| 文档流影响 | 不改变元素在文档流中的位置，不会影响其他元素布局 | absolute、fixed 会脱离文档流，relative 会保留原位置 |
| 性能表现 | 触发 GPU 加速，动画执行更流畅 | 频繁修改位置会触发重排，性能开销更大 |
| 参考基准 | 相对于元素自身当前位置平移 | relative 相对于原位置，absolute 相对于最近的非 static 定位祖先 |
用 Translate 实现元素定位
当需要让元素相对于自身位置做偏移，且不影响周围布局时，用 Translate 比 position 更合适，比如实现元素居中：
/* 传统 position 居中方案 */
.box1 {
position: absolute;
left: 50%;
top: 50%;
/* 需要减去自身宽高的一半 */
margin-left: -50px;
margin-top: -30px;
width: 100px;
height: 60px;
}
/* Translate 居中方案 */
.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 直接平移自身宽高的一半，不需要计算具体数值 */
transform: translate(-50%, -50%);
width: 100px;
height: 60px;
}
如果不需要脱离文档流，也可以直接给元素加 Translate 实现偏移，比如让按钮在 hover 时轻微右移：
.btn {
padding: 8px 16px;
background: #1890ff;
color: #fff;
border: none;
transition: transform 0.2s;
}
.btn:hover {
/* hover 时向右下角各平移 2px */
transform: translate(2px, 2px);
}
用 Translate 实现动画效果
Translate 配合 transition 或者 animation 可以实现各种流畅的位移动画，以下是几个常见场景的示例。
渐变位移动画
实现元素从左侧滑入页面的效果：
/* 初始状态在视口左侧外部 */
.slide-in {
transform: translateX(-100%);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
/* 添加 active 类后滑入到正常位置 */
.slide-in.active {
transform: translateX(0);
opacity: 1;
}
循环浮动动画
实现元素上下循环的浮动效果：
.float-element {
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
/* 向上平移 10px */
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
3D 平移动画
实现元素沿 Z 轴平移的 3D 效果，需要先给父元素设置 perspective：
/* 父元素设置透视距离 */
.container {
perspective: 1000px;
}
.card {
width: 200px;
height: 120px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
/* 沿 Z 轴平移 20px，产生靠近用户的 3D 效果 */
transform: translateZ(20px);
}
使用注意事项
- Translate 的平移只是视觉上的偏移，元素在文档流中的原始位置不会改变，因此不会影响其他元素的布局计算。
- 如果同时需要设置多个 transform 函数，要写在一个 transform 属性里，比如
transform: translate(10px, 10px) rotate(45deg)，分开写会覆盖之前的变换效果。 - 做动画时优先使用 transform 和 opacity 属性，这两个属性不会触发重排重绘，性能远优于修改 top、left 等定位属性。
- 使用百分比作为 Translate 的单位时，参考的是元素自身的宽高，而不是父元素的宽高，这一点和 position 的百分比计算逻辑不同。
CSS_TransformTranslate元素定位动画修改时间：2026-07-14 18:27:31