3D 卡片翻转 + 鼠标跟随倾斜特效（纯 CSS + JS）

效果演示（真实可交互）

完整代码

特效一：hover 3D 翻转（纯 CSS）

<div class="flip-card">
  <div class="flip-inner">
    <div class="flip-front">正面 😺</div>
    <div class="flip-back">背面 🎨</div>
  </div>
</div>

.flip-card {
  width: 260px; height: 160px;
  perspective: 1000px;              /* 父级给透视，翻转才有立体感 */
}
.flip-inner {
  width: 100%; height: 100%;
  position: relative;
  transition: transform .6s;
  transform-style: preserve-3d;     /* 保留 3D 子元素 */
}
.flip-card:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; backface-visibility: hidden;  /* 背面隐藏 */
}
.flip-front { background: #1c2029; color: #e8e8e8; }
.flip-back  { background: #6c8cff; color: #fff; transform: rotateY(180deg); }

特效二：鼠标跟随倾斜（JS tilt）

<div id="tilt">把鼠标放上来</div>

#tilt {
  width: 260px; height: 160px; border-radius: 16px;
  background: linear-gradient(135deg, #1c2029, #232a3d);
  transition: transform .12s ease-out;
  will-change: transform; cursor: pointer;
}

const card = document.getElementById('tilt');
card.addEventListener('mousemove', (e) => {
  const r = card.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width;
  const y = (e.clientY - r.top) / r.height;
  const rx = (0.5 - y) * 18;   // 倾斜角度，可调
  const ry = (x - 0.5) * 18;
  card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg)`;
});
card.addEventListener('mouseleave', () => {
  card.style.transform = 'perspective(800px) rotateX(0) rotateY(0)';
});

原理说明

• perspective：透视距离，值越小 3D 效果越强（600-1000px 较自然）
• rotateX/rotateY：绕 X/Y 轴旋转，鼠标位置映射为角度（本例最大 ±18°）
• preserve-3d：让子元素在 3D 空间定位，翻转卡片必须加
• backface-visibility: hidden：翻转后隐藏背面，实现「换面」效果
• will-change: transform：提前告知浏览器做合成优化，避免卡顿

参数调节

常见问题

Q: 手机上能用吗？ 鼠标跟随特效是桌面专属；3D 翻转在触屏上通过 tap 触发（:active 或点击切换类名）。

Q: 卡顿怎么办？ 确认加了 will-change: transform，且不要对卡片内部做重排操作（如频繁改文字）。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名。