跳到正文

3D 翻转卡片

3D Flip Card

初级通用

卡片正面是头像和名字，鼠标移上去（或者点一下），卡片像实物一样翻过来，背面是简介和链接。团队介绍、作品集、单词卡都常用，同一块地方放下两层信息，翻的过程本身也很好玩。

你可能会说：「团队介绍页的成员卡片，能不能鼠标放上去就翻过来，背面显示个人简介？」

效果预览

正在加载演示…

怎么做

  1. 1

    结构：外框 → 翻转层 → 正反两面

    外框负责透视，中间一层负责翻转，正面和背面叠放在翻转层里。背面里的链接要可以用键盘聚焦，所以下一步会让「聚焦到卡片里面」也触发翻转。

    查看代码html
    <div class="flip-card">
  <div class="flip-card__inner">
    <div class="flip-card__face flip-card__front">
      <img src="/team/lin.jpg" alt="">
      <h3>小林</h3>
      <p>产品设计</p>
    </div>
    <div class="flip-card__face flip-card__back">
      <p>做过 3 款百万用户的 App，相信好产品是删出来的。</p>
      <a href="/team/lin">看看作品</a>
    </div>
  </div>
</div>
  2. 2

    透视 + 保留 3D + 隐藏背面

    三个属性缺一不可：外框的 perspective 让翻转有立体感；翻转层的 preserve-3d 让两面各有朝向；两面的 backface-visibility: hidden 让背对你的那一面不显示。背面预先转 180°。悬停或卡片内有元素获得焦点时翻过去。

    查看代码css
    .flip-card { height: 224px; perspective: 1000px; }
.flip-card__inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card__back { transform: rotateY(180deg); }
  3. 3

    手机上点击翻转，减少动效时改淡入

    手机没有悬停，用一个按钮（或点卡片）切换 is-flipped 类。开启减少动效时不做 3D 翻转，改成背面淡入覆盖在正面上。

    查看代码css
    @media (hover: none) {
  .flip-card:hover .flip-card__inner { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none; transform: none !important; }
  .flip-card__back { transform: none; opacity: 0; transition: opacity 0.2s; }
  .flip-card:hover .flip-card__back,
  .flip-card:focus-within .flip-card__back,
  .flip-card.is-flipped .flip-card__back { opacity: 1; }
}

适合放在哪

适合用

  • 团队介绍、讲师介绍页：正面照片和名字，背面简介。
  • 作品集：正面封面图，背面项目说明和链接。
  • 背单词、知识卡片：正面问题，背面答案。

不适合用

  • 背面的信息和正面同样重要时，别藏起来；直接一起展示。
  • 背面内容很长需要滚动时，别塞进卡片；放到详情页。
  • 卡片要被频繁对比（比如套餐价格）时，别用悬停翻转；来回翻很累。

让 AI 帮你做

请把【需要两面展示的卡片，如：团队介绍页的成员卡片】做成 3D 翻转卡片。先阅读卡片组件和样式写法，确认正面、背面要放的内容。要求：外框设 perspective（约 1000px），翻转层 transform-style: preserve-3d，正反两面叠放且都 backface-visibility: hidden（带 -webkit- 前缀），背面预先 rotateY(180deg)；鼠标悬停、或卡片内元素获得键盘焦点时翻转；触屏设备用点击切换；翻转约 0.7 秒；开启减少动效时改为背面淡入。卡片高度固定，翻转不能引起布局变化。沿用现有组件，不改无关代码。最后说明怎样验证：用 Tab 键能翻到背面并聚焦链接，手机上点击可以翻转。

用到的知识

卡片翻转透视3D 变换聚焦