CSS变量控制transform失效，因var(--x)缺单位（如“20px”）会被浏览器丢弃，导致translate3d(0,0,0)；需显式带单位、用calc()兜底、@property声明syntax与inherits，并确保加载顺序正确。
为什么直接用 --x 和 --y 变量控制 transform 会失效
因为 CSS 自定义属性本身不参与计算，transform: translate3d(var(--x), var(--y), 0) 中的 var(--x) 若没带单位（比如 "20px"），浏览器会当作无效值丢弃，最终变成 translate3d(0, 0, 0)。更隐蔽的是：即使你写了 --x: 20px，在 JS 动态更新时若漏掉单位或拼错变量名，CSS 层面不会报错，但效果完全消失，调试极难定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有用于
transform的变量必须**显式携带单位**，如--tx: 12px、--ty: -8px，不能只存数字 - 在 CSS 中用
calc()做兜底，例如translate3d(calc(var(--tx, 0px)), calc(var(--ty, 0px)), 0)，避免变量未定义时整个 transform 崩溃 - 用
getComputedStyle(el).getPropertyValue('--tx')在控制台手动检查变量是否被正确写入，确认是字符串且含单位
如何用 JS 绑定鼠标位置并安全更新 CSS 变量
核心不是“算偏移”，而是**把坐标映射到合理范围，并防抖+节流**。卡片越小，视差幅度越大反而显得假；鼠标快速划过时高频写变量会触发大量重排，卡顿明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
element.getBoundingClientRect()获取卡片相对视口的位置，再用event.clientX - rect.left算出鼠标在卡片内的局部坐标（0~width, 0~height） - 将局部坐标归一化为
-1 ~ +1范围：const x = (clientX - centerX) / (width / 2)，再乘以预设最大位移（如16px） - 加一层
requestAnimationFrame节流：只在下一帧更新变量，避免连续触发；不用debounce，否则悬停响应延迟感强 - 离开卡片时，用
transition: --tx 0.3s ease, --ty 0.3s ease让变量平滑归零（注意：CSS 变量本身不支持 transition，需配合@property或改用transform直接写）
为什么加了 @property 还是没动画效果
@property 是让 CSS 变量支持 transition 的前提，但极易漏掉关键配置：类型（type）和继承（inherits）。如果声明成 type: '<number>'</number> 却传入 "12px" 字符串，或者忘了设 inherits: false（默认 true，子元素会继承并干扰），动画就静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对每个用于动画的变量单独声明：
@property --tx { syntax: "<length>"; inherits: false; initial-value: 0px; }</length> -
syntax必须精确匹配——位移用"<length>"</length>，旋转用"<angle>"</angle>，别混用"<number>"</number>（它不带单位，无法参与 transform） - 确保该声明位于 :root 或目标元素选择器作用域内，且**在使用该变量的规则之前加载**（顺序很重要）
- Chrome DevTools 的 Styles 面板里，能看到变量名旁出现小齿轮图标，才表示
@property生效
移动端 touchmove 怎么适配视差且不遮挡点击
touch 事件默认不触发 :hover，且 touchmove 频率远高于 mousemove，不做限制会导致 iOS 上严重卡顿，还可能拦截后续的 click（300ms 延迟问题已过时，但 touch-action 仍关键）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
touch-action: none，禁用浏览器默认缩放/滚动行为，让 touchmove 完全交由 JS 处理 - 用
event.touches[0]取第一个触点，避免多指混乱；绑定在document上而非卡片本身，防止 touch 离开卡片区域后中断 - 在
touchstart时记录初始位置，touchend后清空变量并触发一次transition归零，避免松手后卡片悬停在半空 - 为兼顾可访问性，保留
:hover样式作为降级（桌面端），但不要依赖它做核心动效逻辑
视差效果的真实复杂度不在公式，而在变量生命周期管理：JS 写入时机、CSS 解析单位、浏览器渲染管线对自定义属性的处理节奏，三者稍有错位，效果就断在某个环节。最常被忽略的是 @property 的 syntax 类型声明和变量值单位的一致性——差一个 px，整套动效就静音。
