前端Wiki/CSS3/进阶/2D 与 3D 变换

实战翻转卡片

翻转卡片是 3D 变换的招牌案例：鼠标悬停，正面翻走、背面转出。结构分三层：

scene：外层提供 perspective，并固定卡片尺寸。
card：中层持有 preserve-3d，悬停时整体 rotateY(180deg)，过渡带出翻转动画。
face 正/背：两个面都绝对定位铺满；背面预先 rotateY(180deg)；两面都设 backface-visibility:hidden，这样转过去时正面自动隐身、背面自动现身。

几个易错点：背面必须先转 180 度「预埋」；两个面都要 absolute 叠在同一位置；宽高由 scene 决定。理解了这个结构，做抽奖券、会员卡、问答卡都只是换内容。

本节要点翻转卡三层结构：scene 给透视、card 管 preserve-3d 和翻转、正背面各自预转 180 度并隐藏 backface；悬停只改 card 的 rotateY。

CSS

<style>
  .scene {
    width: 160px; height: 100px;
    perspective: 800px;
  }
  .card {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s;
  }
  .scene:hover .card { transform: rotateY(180deg); }
  .face {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    justify-content: center;
    border-radius: 8px; color: #fff;
    backface-visibility: hidden; /* 背面隐藏 */
  }
  .front { background: #39c5cf; }
  .back  {
    background: #7c4dff;
    transform: rotateY(180deg); /* 预埋翻转 */
  }
</style>
<div class="scene">
  <div class="card">
    <div class="face front">正面：悬停试试</div>
    <div class="face back">背面：翻出来啦</div>
  </div>
</div>

🔗 相关词条3D 变换绝对定位透视过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读