我用 CSS 做了一个会跟着鼠标转的 3D 卡片，前端新手也能看懂

标题：我用 CSS 做了一个会跟着鼠标转的 3D 卡片，前端新手也能看懂

导语

你肯定在 Awwwards 或一些产品官网见过那种卡片：鼠标滑上去，卡片正面会微微偏转，露出背面的内容，阴影还会跟着动。很多人以为这是 Three.js 或 WebGL 才能做的效果，其实浏览器原生 CSS 就能实现，而且性能足够放进真实业务里。

正文

### 问题：为什么大多数“3D 卡片”看起来廉价？

网上能搜到的 demo 大多有同一个问题：只有 rotateX/rotateY，没有透视、没有阴影变化，也没有边界控制。结果就是卡片转得很生硬，甚至跑到屏幕外面去。真正能用的版本，需要同时处理 4 件事：

• 透视距离（perspective）
• 鼠标位置映射到旋转角度
• 阴影随旋转偏移
• 元素溢出时做边界裁剪

### 方案：纯 CSS + 几十行 JS

先给容器加透视，再让卡片内部用 transform-style: preserve-3d 保持立体感。JS 只需要做一件事：把鼠标坐标映射成 rotateX/rotateY 的角度。

  

    
正面
    
背面
  

.scene {
  perspective: 800px;
  width: 320px;
  height: 420px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  border-radius: 16px;
  overflow: hidden;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
}

.card-back {
  transform: rotateY(180deg);
}

const card = document.querySelector('.card');
const scene = document.querySelector('.scene');

scene.addEventListener('mousemove', (e) => {
  const rect = scene.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;

  const rotateY = ((x - centerX) / centerX) * 15;
  const rotateX = -((y - centerY) / centerY) * 15;

  card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

关键细节：perspective 设成 800px 左右比较自然，角度控制在 ±15° 内不会晕。backface-visibility: hidden 保证背面翻过去时不可见。

### 结论

这个方案的性能开销几乎为零，因为 GPU 只做了合成层变换，没有触发布局重计算。如果你的项目里有产品卡片、团队介绍、奖状展示这类组件，这套方案可以直接用。唯一要小心的就是移动端没有 mousemove，建议降级成静态展示。

收尾

如果你希望卡片不只是旋转，还想加上“悬停上浮 + 阴影扩散”的效果，下一步可以把 box-shadow 也绑定到鼠标位置上，卡片会有更强的悬浮感。