3D倾斜卡片 - anime动效

🎴

Live Demo — 移动鼠标到卡片上

🚀

深空探索者

星际旅行者的随身助手，导航、物资、记录，一站式管理。

实验性

const card = document.getElementById('tiltCard');

card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  const cx = r.left + r.width / 2;
  const cy = r.top + r.height / 2;
  // 偏移量归一化到 [-1, 1]
  const rx = (e.clientY - cy) / (r.height / 2);
  const ry = (e.clientX - cx) / (r.width / 2);

  anime({ targets: card,
    rotateX: -rx * 12,
    rotateY:  ry * 16,
    duration: 200, easing: 'easeOutCubic'
  });

  card.style.setProperty('--mx', `${(ry + 1) / 2 * 100}%`);
  card.style.setProperty('--my', `${(rx + 1) / 2 * 100}%`);
});

card.addEventListener('mouseleave', () => {
  anime({ targets: card,
    rotateX: 0, rotateY: 0,
    duration: 500, easing: 'easeOutBack'
  });
});

核心原理

用 `rotateX/Y` 配合 CSS `perspective` 模拟 3D 倾斜。`getBoundingClientRect` 算出鼠标相对卡片中心的归一化偏移 `rx/ry`（-1 ~ 1），再乘以最大旋转角度（12°/16°）。`::after` 伪元素里用 CSS `radial-gradient` 随 `--mx/--my` 变量移动高光区域，制造"光在表面滑动"的质感。

💡 `rotateX` 是上下倾（Y 轴旋转），`rotateY` 是左右倾（X 轴旋转），别搞反。离开时用 `easeOutBack` 缓动能有一丝轻微回弹感，比硬弹回更自然。

perspective rotateX/Y CSS radial-gradient 归一化坐标 preserve-3d