CSS中的translate函数是transform属性的重要组成部分，主要用于对元素进行平移变换，不需要改变元素在文档流中的原始位置就能实现位置的偏移，是前端开发中调整元素位置、实现动画效果的常用工具。
translate函数的基础语法
translate函数可以接收一个或两个参数，分别对应X轴和Y轴的平移距离，语法格式如下：
/* 单参数：仅平移X轴，Y轴默认0 */ transform: translate(tx); /* 双参数：分别平移X轴和Y轴 */ transform: translate(tx, ty);
参数取值可以是长度单位（如px、em、rem）或者百分比，百分比的取值是相对于元素自身的宽高计算，比如translate(50%)会让元素在X轴方向平移自身宽度的一半。
不同场景下的用法示例
1. 单轴平移
如果只需要让元素在水平或者垂直方向移动，可以单独设置X轴或Y轴的平移值：
/* 水平方向向右平移20px */
.move-x {
transform: translateX(20px);
/* 等价于 transform: translate(20px, 0); */
}
/* 垂直方向向下平移30px */
.move-y {
transform: translateY(30px);
/* 等价于 transform: translate(0, 30px); */
}
2. 双轴平移
同时调整水平和垂直方向的位置，直接传入两个参数即可：
/* 向右移15px，向下移25px */
.move-xy {
transform: translate(15px, 25px);
}
3. 百分比取值的平移
使用百分比作为参数时，平移距离基于元素自身的尺寸计算，非常适合实现居中效果：
/* 元素自身宽高的一半作为平移值，实现完全居中 */
.center-box {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
translate与position定位的区别
很多开发者会混淆translate和position定位的作用，两者的核心差异如下：
| 对比项 | translate函数 | position定位 |
|---|---|---|
| 文档流影响 | 不改变元素在文档流中的原始位置，不会影响其他元素布局 | absolute/fixed会脱离文档流，影响其他元素位置 |
| 取值参考 | 百分比参考元素自身宽高 | 百分比参考父容器宽高（relative除外） |
| 性能表现 | 触发GPU加速，动画性能更好 | 频繁修改位置可能触发重排，性能较差 |
实际使用注意事项
- translate函数需要和transform属性配合使用，不能单独作为CSS属性存在
- 如果同时设置多个transform变换，需要把translate和其他变换写在同一行，避免后面的变换覆盖前面的效果
- 平移的距离可以为负值，负值代表向反方向平移，比如
translateX(-10px)是向左移动10px
通过合理运用translate函数，可以高效实现元素的位置调整和动画平移效果，相比传统定位方式在性能和布局友好度上都有明显优势，是前端样式开发中必备的技能。
CSStranslate函数css_transform平移效果前端样式修改时间：2026-06-25 17:00:15