用 transform: translate() 实现平移最可靠，不触发重排、性能好且支持硬件加速；需搭配 transition 才有动画效果，避免用 left/top 定位，移动端拖拽须用 js 动态设置 transform 并防布局抖动。
用 transform: translate() 实现平移
HTML 本身没有“平移”属性，必须靠 CSS 的 transform 控制。最常用、最可靠的方式就是 translate() 函数，它对元素做相对位移，不触发重排，性能好，也支持硬件加速。
常见错误是直接改 left / top 配合 position: relative 或 absolute —— 这会触发布局重排，动画卡顿，且语义上不是“平移”，而是定位偏移。
-
translate(20px, 10px)：X 向右 20px，Y 向下 10px（注意 Y 正方向是向下） -
translate(-1rem, 0)：支持任意单位，包括rem、%、vw，但%是相对于自身宽高，不是父容器 - 单方向平移可简写：
translateX(30px)、translateY(-50%)、translateZ(20px)（用于 3D）
transform 必须搭配 transition 才有动画效果
只写 transform: translate() 只会瞬间跳到目标位置。要实现平滑移动，得加 transition 声明。
容易踩的坑是把 transition 写在 hover 或 class 切换的目标状态里，却忘了初始状态也要有相同的 transform 值（哪怕为 translate(0, 0)），否则第一次动画不会生效。
- 推荐写法：给元素默认加上
transition: transform 0.3s ease; - 然后通过 class 切换控制：
.moved { transform: translate(100px, -20px); } - 避免写
transition: all 0.3s;—— 它会监听所有属性变化，可能意外触发其他开销大的重绘
移动端 touch 拖拽平移要用 transform + JavaScript 实时更新
纯 CSS 无法响应手指拖动，必须靠 JS 计算位移量，再动态设置 style.transform。关键点是别用 left/top，坚持用 translate()。
常见错误是每帧都读取 offsetLeft 或 getBoundingClientRect()，造成强制同步布局（layout thrashing），严重掉帧。
- 正确做法：只在
touchmove中记录偏移量（如deltaX），然后用element.style.transform = `translate(${deltaX}px, ${deltaY}px)` - 更优方案：用
requestAnimationFrame批量更新，避免高频设值 - 记得在
touchend后重置或缓动回弹，否则元素会“卡住”在最后位置
IE 和旧 Safari 对 translateZ 或 3D 平移的兼容性陷阱
加 translateZ(0) 或 translate3d(0,0,0) 能强制开启 GPU 加速，在 Chrome/Firefox 上很稳，但在 IE10/11 或 iOS Safari
不是所有场景都需要硬加 3D，尤其只是简单 XY 平移时，translate() 本身在现代浏览器中已足够快。
- 仅当实测动画掉帧（比如大量元素同时平移）才考虑加
translateZ(0) - 加了之后务必在真机 iOS Safari 和 Windows IE 上验证文字渲染和层级关系
- 避免在
transform中混用 2D 和 3D 函数，例如translate(10px, 10px) translateZ(0)，某些旧引擎解析异常
平移看着简单，但真正跑得顺、适配全、不翻车，核心就三点：坚持用 translate()、动画必配 transition、JS 拖拽时别碰布局属性。细节都在单位、触发时机和兼容性边界里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
