3D 倾斜光影面板

跟随触摸位置的 3D 透视倾斜 + 径向反射流光，松手 Spring 阻尼回正。把指针移到卡片上试试，内容层用 translateZ 做了 3D 分层，越靠近视口的层位移越明显。

实时 Demo

Hover Me

pointermove 计算指针相对位置 → 映射为 rotateX / rotateY，rAF 阻尼追踪，松手归零。

rotateX 0.0° rotateY 0.0° scale 1.000

手机用手指按住卡片拖动指针位置，松手自动回正

效果拆解

倾斜映射：指针在卡片内的相对坐标 px/py ∈ [0,1]，映射为 (px-0.5)×10 → 最大 ±5°，角度太大反而廉价。
阻尼追踪：不直接写 transform，而是每帧 current += (target - current) * 0.14，天然形成阻尼惯性；松手时把 target 归零即"回正"。
径向流光：radial-gradient(200px circle at var(--mx) var(--my))，两个 CSS 变量由 JS 写入，光斑跟着指针走。
3D 分层：容器 perspective(700px) + transform-style: preserve-3d，子元素 translateZ(18~30px)，形成视差厚度。
性能：只动 transform（GPU 合成层）+ will-change，不触发重排；用 rAF 防抖，指针事件本身只写变量。

AI 提示词

为 Card 添加跟随触摸位置的 3D 透视倾斜与径向反射流光：指针在卡片内的相对位置映射为 rotateX/rotateY（最大 ±5°），用 rAF 每帧以 0.14 的阻尼系数追踪目标值，松手/移出时目标归零形成 Spring 阻尼回正；叠加一个跟随指针的 radial-gradient 径向光斑；容器启用 perspective(700px) 与 preserve-3d，子元素用 translateZ 做 3D 分层视差；只使用 transform 保证 GPU 合成，不触发重排。为 Card 添加跟随触摸位置的 3D 透视倾斜与径向反射流光：指针在卡片内的相对位置映射为 rotateX/rotateY（最大 ±5°），用 rAF 每帧以 0.14 的阻尼系数追踪目标值，松手/移出时目标归零形成 Spring 阻尼回正；叠加一个跟随指针的 radial-gradient 径向光斑；容器启用 perspective(700px) 与 preserve-3d，子元素用 translateZ 做 3D 分层视差；只使用 transform 保证 GPU 合成，不触发重排。

把"±5°"、"0.14"换成你喜欢的数值即可调手感：角度越大越夸张，系数越小越"飘"。
提示词已内置本 Demo 的真实参数，丢给 AI 即可还原同款。