在css中如何制作简易卡片翻转效果

来源：站长工具作者：Canve头衔：草根站长

导读：本期聚焦于小伙伴创作的《在css中如何制作简易卡片翻转效果》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《在css中如何制作简易卡片翻转效果》有用，将其分享出去将是对创作者最好的鼓励。

卡片翻转效果是前端页面中常见的交互设计，通常用于展示内容的双面信息，比如商品卡片的正面是图片和名称，背面是详细参数。通过CSS的3D变换属性，我们可以不依赖JavaScript实现流畅的翻转效果。

在css中如何制作简易卡片翻转效果

核心实现原理

卡片翻转效果主要依赖三个CSS属性：perspective设置3D透视距离，transform-style: preserve-3d让子元素保持3D空间，transform: rotateY()实现Y轴旋转。同时需要给翻转过程添加transition属性，让旋转动作更平滑。

基础HTML结构

首先需要搭建卡片的HTML结构，外层是翻转容器，内层包含正面和背面两个元素：

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <h3>卡片正面</h3>
      <p>这里是正面展示的内容</p>
    </div>
    <div class="card-back">
      <h3>卡片背面</h3>
      <p>这里是背面展示的详细信息</p>
    </div>
  </div>
</div>

CSS样式设置

1. 容器与透视设置

首先给外层容器设置透视属性，这是实现3D效果的基础，透视值越小，3D效果越强烈：

.card-container {
  width: 300px;
  height: 200px;
  /* 设置3D透视距离，单位px */
  perspective: 1000px;
  margin: 50px auto;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  /* 让子元素保持3D变换空间 */
  transform-style: preserve-3d;
  /* 设置翻转过渡动画，0.6秒完成，缓动函数为ease */
  transition: transform 0.6s ease;
}

2. 正反面样式设置

正反两个面需要绝对定位，覆盖在同一个位置，并且背面需要预先旋转180度，这样翻转后才能正确显示：

.card-front, .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 隐藏背面元素，避免翻转时看到背面的镜像 */
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-front {
  background-color: #409eff;
  color: #fff;
}

.card-back {
  background-color: #67c23a;
  color: #fff;
  /* 背面预先旋转180度，翻转后正好正对用户 */
  transform: rotateY(180deg);
}

3. 触发翻转逻辑

通过鼠标悬停或者点击事件触发卡片旋转，这里以悬停为例，给容器添加hover状态，让卡片旋转180度：

/* 鼠标悬停时，卡片旋转180度，实现翻面 */
.card-container:hover .card {
  transform: rotateY(180deg);
}

效果优化建议

可以调整perspective的数值，找到最适合当前卡片尺寸的3D透视效果
给transition添加不同的缓动函数，比如linear、cubic-bezier()，让翻转节奏更符合需求
如果需要点击触发翻转，可以配合少量JavaScript切换类名，修改transform属性即可
可以给卡片添加阴影、圆角等样式，提升视觉美观度

完整示例代码

以下是可直接运行的完整代码，复制后保存为HTML文件即可看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS卡片翻转效果</title>
  <style>
    .card-container {
      width: 300px;
      height: 200px;
      perspective: 1000px;
      margin: 50px auto;
    }

    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
    }

    .card-front, .card-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .card-front {
      background-color: #409eff;
      color: #fff;
    }

    .card-back {
      background-color: #67c23a;
      color: #fff;
      transform: rotateY(180deg);
    }

    .card-container:hover .card {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-front">
        <h3>卡片正面</h3>
        <p>鼠标悬停查看背面内容</p>
      </div>
      <div class="card-back">
        <h3>卡片背面</h3>
        <p>这里是背面的详细信息</p>
      </div>
    </div>
  </div>
</body>
</html>

CSS 卡片翻转 transform transition perspective修改时间：2026-07-23 10:00:35

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。