在CSS的transform属性体系中，translate()是用于实现元素位移的核心函数，它可以在不改变文档流的前提下让元素在二维或三维空间内发生位置偏移，相比传统的position定位有更灵活的使用场景。
translate()基础语法
translate()函数支持多种参数形式，最常用的二维位移语法如下：
/* 单参数：仅设置X轴位移，Y轴默认为0 */ transform: translate(100px); /* 双参数：分别设置X轴、Y轴位移 */ transform: translate(100px, 50px); /* 使用百分比：相对于元素自身的宽高计算位移值 */ transform: translate(50%, 25%); /* 单独设置X轴位移 */ transform: translateX(100px); /* 单独设置Y轴位移 */ transform: translateY(50px);
需要注意的是，当使用百分比作为位移值时，X轴的百分比是相对于元素自身的宽度计算，Y轴的百分比是相对于元素自身的高度计算，这个特性和其他使用百分比的属性有明显区别。
三维位移扩展
除了二维位移，CSS还提供了三维位移的函数，用于实现3D场景下的位移效果：
/* 三维位移：X轴、Y轴、Z轴 */ transform: translate3d(100px, 50px, 20px); /* 单独设置Z轴位移，需要配合perspective属性才能看到效果 */ transform: perspective(500px) translateZ(50px);
translate()与position定位的区别
很多开发者会混淆translate()和传统position定位的位移效果，两者的核心区别如下：
| 对比维度 | translate() | position定位 |
|---|---|---|
| 文档流影响 | 不改变元素原有占位，不影响其他元素布局 | absolute/fixed会脱离文档流，影响其他元素布局 |
| 位移参考对象 | 相对于元素自身当前位置偏移 | relative相对于自身原位置，absolute相对于最近的非static定位祖先 |
| 性能表现 | 触发GPU加速，动画场景性能更好 | 可能触发重排，动画场景性能较差 |
| 百分比计算 | 相对于元素自身宽高 | 相对于包含块的宽高 |
实际使用示例
示例1：鼠标悬停位移效果
实现卡片鼠标悬停时轻微上移的效果，不需要改变布局：
<div class="card">卡片内容</div>
<style>
.card {
width: 200px;
height: 120px;
background: #f5f5f5;
border-radius: 8px;
transition: transform 0.3s ease;
}
.card:hover {
/* 鼠标悬停时向上位移5px */
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>
示例2：居中定位实现
使用translate()实现元素水平和垂直居中，不需要知道元素具体宽高：
.center-box {
position: absolute;
left: 50%;
top: 50%;
/* 向左向上各偏移自身宽高的50%，实现居中 */
transform: translate(-50%, -50%);
}
使用注意事项
- translate()是transform的子属性，使用时需要写在transform属性中，不能单独作为CSS属性使用
- 位移值可以是正值也可以是负值，正值对应X轴向右、Y轴向下，负值对应X轴向左、Y轴向上
- 多个transform函数可以同时使用，比如先位移再旋转：
transform: translate(100px) rotate(45deg);，注意函数顺序会影响最终效果 - 如果需要兼容旧版本浏览器，可以添加对应前缀，比如
-webkit-transform: translate(100px);
translate()的位移不会影响元素的offsetTop、offsetLeft等属性值，这些属性获取的是元素在文档流中的原始位置，这一点在获取元素位置时需要注意。
掌握translate()的用法后，可以在很多布局偏移、动画交互场景中替代传统的position定位，既能减少布局计算开销，也能实现更流畅的交互效果。