translate() 移动元素自身坐标原点，正值向右下、负值向左上；不触发重排，仅影响渲染层；常见问题包括被 absolute 定位或 overflow: hidden 覆盖；优先用于动画等无需改变文档流的场景。
translate() 的坐标系是怎么算的
它移动的是元素自身的坐标原点（左上角），不是页面或父容器的某个固定点。值为正时向右/下，负值向左/上——这点和 css 的 top/left 表现一致，但机制完全不同：transform: translate() 不触发重排，只影响渲染层。
常见错误现象：transform: translate(10px, 10px) 看起来没动？大概率是元素本身有 position: absolute 且 top/left 覆盖了视觉位置，或者父容器设置了 overflow: hidden 把移出的部分裁掉了。
使用场景：动画、悬停位移、滚动视差、模态框入场——只要不需要改变文档流，优先用 translate() 而不是 margin 或 top。
单方向平移和双方向写法差异
translateX()、translateY() 和 translate() 本质是语法糖，浏览器最终都转成矩阵运算。但写法不同会影响可维护性和兼容性判断。
立即学习“前端免费学习笔记（深入）”；
-
translate(20px, 0)和translateX(20px)渲染结果一致，但后者语义更明确，也方便后期加transition时只动 X 轴 - IE 9–11 支持
translate()，但不支持translateZ()或带单位的translate3d()；若需强制 GPU 加速，得写translate3d(0, 0, 0)，哪怕 Z 是 0 - 百分比值如
translate(50%, 50%)是相对于元素自身宽高的，不是父容器——这点常被误读
配合 transition 动画时的坑
直接给 transform 加 transition 没问题，但容易忽略两个关键点：
- 起始状态必须显式声明，比如从
transform: translateX(-100%)到translateX(0)，如果初始没设transform，浏览器会从none插值，导致动画异常 - 不要混用
transform和top/left做同一方向的动画，它们触发的渲染路径不同，top触发重排，transform只走合成层，混用会导致卡顿甚至跳帧 - 移动端 safari 对
transform+will-change: transform组合更敏感，加了可能反而变慢，建议实测后再决定是否启用
translate() 和 position 的边界情况
当元素同时有 position: relative + top: 10px 和 transform: translateY(20px)，最终位移是两者叠加（30px），但注意：此时 getBoundingClientRect() 返回的位置是叠加后的，而 offsetTop 仍只反映 top 值。
容易被忽略的地方：用 js 监听位置变化时，transform 不会改变 offsetLeft/offsetTop，也不会触发 resize 或 scroll 事件。要检测位移，得靠 IntersectionObserver 或轮询 getBoundingClientRect()。