用 transform + transition 实现多图层微差位移，需每层独立设置 transform 偏移、transition-delay 和 duration；统一 hover 触发会同步动画，丧失视差感；须配合适当 transform-origin、preserve-3d、cubic-bezier 曲线及 overflow 处理。
直接用 transform + transition 做多图层位移是可行的，但“微差”效果（即各层移动距离/方向/延迟不同）必须靠分层控制实现，不能只靠一个 :hover 统一触发。
为什么不能只写一个 .container:hover .layer？
因为所有子层会同步开始、同步结束，失去视差感。真正可用的微差，需要每层独立设置 transform 偏移量、transition-delay 和 transition-duration，否则视觉上就是“一起飘”，不是“错落飘”。
- 同一父容器下多个子元素，必须分别加类或用
:nth-child()精确选中 - 位移值建议用
px或rem，避免百分比在不同容器宽高下行为不一致 - 不要对
left/top做 transition——会触发重排，卡顿明显
transform 顺序和 transform-origin 怎么配？
比如一层向右+上移、一层向左+下移、一层只旋转轻微角度，它们的基准点必须统一，否则偏移方向会发散。默认 transform-origin: center 最稳妥；若某层需绕左上角旋转，得单独设 transform-origin: top left，同时位移值也要相应调整。
- 先写
translate再写rotate：平移后绕新位置旋转，适合“飘动中带扭转”效果 - 先写
rotate再写translate：绕原点转完，再沿旋转后的轴向移动，适合“甩出去”感 - 所有层共用同一
transform-style: preserve-3d容器，确保 3D 变换不被扁平化
如何让鼠标移入时动画更轻盈不突兀？
关键不在“动得多”，而在“动得准”：用自定义贝塞尔曲线替代 ease，并给每层加细微延迟差。例如三层依次延迟 0.05s、0.1s、0.15s，比全写 0s 更有呼吸感。
- 推荐曲线：
cubic-bezier(0.25, 0.46, 0.45, 0.94)（先缓后急，模拟惯性） - 务必写
transition: transform 0.4s cubic-bezier(...)，别用all——否则文字颜色微调也会触发重绘 - 对频繁悬停的区域，常态样式里加
will-change: transform，提前升层，避免首帧掉帧
最易被忽略的是容器尺寸边界和 overflow 处理：如果父容器没设 overflow: hidden，位移过大的图层会撑开布局或露出边缘空白；而设了 overflow: hidden 后，又得确认各层 transform 不会把内容切掉——这需要实测 hover 状态下的实际渲染框，不能只看代码估算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
