3D 倾斜卡片

父级 perspective,子级 tween rotateX / rotateY。用 mapRange 把指针坐标映射到 ±12°。

GSAP Card

移动指针,卡片朝光源方向倾倒

const rx = gsap.quickTo(card, "rotationX", { duration: 0.4, ease: "power3" });
const ry = gsap.quickTo(card, "rotationY", { duration: 0.4, ease: "power3" });

scene.addEventListener("pointermove", (e) => {
  const b = scene.getBoundingClientRect();
  const px = (e.clientX - b.left) / b.width;  // 0~1
  const py = (e.clientY - b.top) / b.height;
  ry(gsap.utils.mapRange(0, 1, -14, 14, px));
  rx(gsap.utils.mapRange(0, 1, 12, -12, py)); // 上方应后仰
});