GSAP Card
移动指针,卡片朝光源方向倾倒
父级 perspective,子级 tween rotateX / rotateY。用 mapRange 把指针坐标映射到 ±12°。
移动指针,卡片朝光源方向倾倒
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)); // 上方应后仰
});