位移属性
最后更新：2026-09-13
translate 位移属性
translate 是 transform 的一个独立属性，用于在 2D 或 3D 空间中移动元素的位置。与 transform: translate() 效果相同，但作为独立属性可以单独控制位移，而不影响其他变换（如旋转、缩放），在需要分别动画化不同变换时非常实用。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
translate: none | <length-percentage> [<length-percentage> [<length>]?]?;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无位移 |
<length> | <percentage> | 类型 | 位移值（可指定 x y z） |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| translate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： translate 只接受 1~3 个值：1 个值只移动 X 轴；2 个值分别移动 X、Y 轴；3 个值可额外移动 Z 轴（需配合 perspective 才能看到效果）。
提示： translate 使用百分比时，基准是元素自身的尺寸，而非父元素，这点与 left/top 不同。
❓ 常见问题
Qtranslate 和 left/top 有什么区别？
Atranslate 只做视觉位移，不改变文档流，不触发重排，浏览器会把它放到合成层由 GPU 处理，动画流畅；left/top 改变布局位置，每一帧都触发重排和重绘，性能差且会推动周围元素。动画和 hover 位移场景应优先使用 translate 或 transform: translate()。
Qtranslate 作为独立属性和 transform: translate() 有性能差异吗？
A两者渲染结果和性能几乎相同，都会进入合成层。真正的区别在于：独立属性 translate 可以被单独动画化，不会覆盖元素上已有的 transform 值（如旋转、缩放），适合分别控制不同变换；而 transform: translate() 写在同一个属性里，改动时必须带上全部函数。
Qtranslate 的百分比是相对于什么的？为什么和 left 不一样？
Atranslate 的百分比相对于元素自身的尺寸，而 left/top 的百分比相对于包含块。例如 translate: 100% 表示向右移动自身宽度的一倍。利用这个特性，配合 position: absolute 加 translate: -50% -50% 就能轻松实现元素水平垂直居中，无需知道元素尺寸。
QtranslateZ 为什么看不到效果？
AtranslateZ 沿 Z 轴位移，默认视图没有透视，位移不会改变元素的投影大小，看起来就像没动。需要给父元素设置 perspective，或在 transform 中带上 perspective() 函数，才能看到近大远小的纵深变化。同理，translate 的第三个值只在 3D 场景下有意义。
🏷️ 相关属性
💡 相关案例
📚 相关教程
