3D 翻转卡片合集（4 款翻转样式，悬停/点击触发可切换）

效果演示（真实可交互）

完整代码

<div class="flip-card">
  <div class="flip-inner">
    <div class="face front">🚀 正面内容</div>
    <div class="face back">翻转后的背面</div>
  </div>
</div>

.flip-card {
  width: 200px;
  height: 190px;
  perspective: 900px;               /* 视距，3D 翻转的立体感来源 */
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4, .1, .2, 1);
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;     /* 关键：背面朝外时隐藏 */
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
}
.front { background: #6c8cff; }
.back  { background: #2a2f52; transform: rotateY(180deg); }

/* 触发方式一：悬停 */
.flip-card:hover .flip-inner { transform: rotateY(180deg); }

// 触发方式二：点击（切换触发方式时使用）
document.querySelectorAll('.flip-card').forEach(card => {
  card.addEventListener('click', () => card.classList.toggle('flipped'));
});

/* 配合点击模式 */
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }

样式变体（仅改 transform 一行）

参数说明

兼容性与性能

• 核心依赖 transform-style: preserve-3d 与 backface-visibility，Chrome 36+ / Safari 9+ / Firefox 49+ / Edge 全支持
• -webkit-backface-visibility 前缀已内置，iOS Safari 行为稳定
• 翻转只做 transform 过渡，GPU 合成无卡顿；同一页面数十张翻转卡片也无压力
• 无障碍建议：点击模式下的卡片应使用 <button> 或添加 tabindex="0" 与键盘事件，保证键盘可达

常见问题

Q: 翻转后背面文字是镜像的怎么办？ 这是正常的 3D 行为，背面本身就应写「镜像方向」的内容；更常见的问题是背面忘加 transform: rotateY(180deg) 初始态，导致翻转时先显示一次镜像正面。

Q: 为什么有的浏览器翻转时卡片会闪一下？ 通常是 backface-visibility 缺失或父级有 overflow: hidden 裁切了 3D 上下文。确保 .flip-inner 上写了 transform-style: preserve-3d，且不要在 .flip-card 上设置 overflow: hidden。

Q: 正面图片内容较多，翻转时性能如何？ transform 过渡只触发合成，与内容多少无关；真正消耗性能的是图片本身的解码。建议正反面图片使用同一张（压缩后），并设置 width/height 避免布局抖动。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名，4 款样式均可自由组合使用。