卡片 3D 倾斜悬停特效（鼠标跟随 + 聚光高光 + 内容分层 CSS JS 源码）

效果演示（真实可交互）

把鼠标移到卡片上：卡片会跟随光标在三维空间倾斜，高光聚点贴着鼠标移动，图标、标题、按钮按不同深度浮起，移出后平滑回正。对比本站「3D 卡片翻转」组件的简单倾斜，本组件额外包含聚光与分层深度。

完整代码

HTML 结构：.t3-card 是倾斜主体，.t3-glare 是聚光层，.t3-inner > * 是需要分层的元素，用 data-depth 声明浮起高度：

<div class="t3-card" id="t3Card">
  <div class="t3-glare" id="t3Glare"></div>
  <div class="t3-inner">
    <span class="t3-icon" data-depth="46">🎴</span>
    <h3 class="t3-title" data-depth="30">3D 卡片倾斜</h3>
    <p class="t3-sub" data-depth="18">...</p>
    <button class="t3-btn" data-depth="38">马上体验</button>
  </div>
</div>

核心 CSS（骨架）：

.t3-wrap { perspective: 900px; }            /* 父容器提供景深 */
.t3-card {
  transform-style: preserve-3d;             /* 保留子元素 3D 上下文 */
  transform: rotateX(0) rotateY(0);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.t3-inner > * { transform: translateZ(var(--depth, 0px)); }  /* 分层浮起 */
.t3-glare {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 255, 255, .16), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
}
.t3-card:hover .t3-glare { opacity: 1; }

核心 JS（平滑跟随 + 分层 + 聚光）：

const card = document.getElementById('t3Card');
const glare = document.getElementById('t3Glare');
const MAX = 14;
const layers = card.querySelectorAll('[data-depth]');
let cur = { x: 0, y: 0 }, target = { x: 0, y: 0 }, raf = null;

card.addEventListener('mousemove', (e) => {
  const r = card.getBoundingClientRect();
  const nx = (e.clientX - r.left) / r.width - 0.5;   // -0.5 ~ 0.5
  const ny = (e.clientY - r.top) / r.height - 0.5;
  target = { x: -ny * MAX * 2, y: nx * MAX * 2 };
  glare.style.setProperty('--gx', (nx + 0.5) * 100 + '%');
  glare.style.setProperty('--gy', (ny + 0.5) * 100 + '%');
  if (!raf) {
    const tick = () => {
      cur.x += (target.x - cur.x) * 0.12;   // 插值平滑
      cur.y += (target.y - cur.y) * 0.12;
      card.style.transform = `rotateX(${cur.x}deg) rotateY(${cur.y}deg)`;
      layers.forEach((el) => {
        const d = +el.dataset.depth;
        el.style.setProperty('--depth', d + 'px');  // 简版：恒定深度
      });
      raf = Math.abs(target.x - cur.x) > .05 || Math.abs(target.y - cur.y) > .05
        ? requestAnimationFrame(tick) : null;
    };
    raf = requestAnimationFrame(tick);
  }
});
card.addEventListener('mouseleave', () => {
  card.style.transform = 'rotateX(0deg) rotateY(0deg)';  // CSS 过渡回正
});

参数说明

兼容性与性能

• 原生 JS + CSS，无任何第三方依赖；transform-style: preserve-3d 需要 Chrome 36+ / Safari 9+ / Firefox 36+
• 动画由 requestAnimationFrame 驱动，只在鼠标移动时运行，静止时零开销
• 使用 CSS 变量 --depth 与 --gx/--gy 传递数值，避免频繁直接改 style 造成的强制同步布局
• 移出时交给 CSS transition 回正，避免 JS 在动画结束时残留一帧抖动

常见问题

Q: 卡片不倾斜或倾斜方向反了？ 检查父容器是否设置了 perspective，且 .t3-card 的 transform-style: preserve-3d 未被覆盖；方向反了就把 target 里的两个负号互换。

Q: 分层元素没有浮起效果？ 确认子元素有 transform: translateZ(var(--depth)) 且 JS 正确设置了 --depth；同时父元素不能有 overflow: hidden，它会压平 3D 上下文。

Q: 鼠标移出后卡片回正很生硬？ 移出时 JS 直接把 transform 清空，回正动画由 CSS transition 承担；如果觉得太快，把 .t3-card 的 transition 时长从 .5s 调大即可。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名；JS 是标准 DOM API，在 React/Vue 中只需把 getElementById 换成 ref 即可复用。