css制作卡片翻转动画效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css制作卡片翻转动画效果

2025-10-24

浏览次数：次

返回列表

答案：通过CSS的transform、perspective和transition属性实现卡片翻转。首先设置外层容器的perspective创建3D视角，再为.card-inner添加transform-style: preserve-3d和transition实现旋转过渡，利用backface-visibility: hidden隐藏背面，正面正常显示，背面初始rotateY(180deg)，鼠标悬停时.card-inner旋转180度完成翻转，结合border-radius、cursor:pointer等优化交互体验，适用于产品展示等场景。

css制作卡片翻转动画效果

实现卡片翻转动画效果，主要依靠 CSS 的 transform 和 perspective 属性，配合 transition 实现平滑过渡。下面是一个简单实用的翻转卡片制作方法。

1. 基本结构（HTML）

卡片通常由一个外层容器包裹前后两个面：

    正面内容
    背面内容

2. 核心样式（CSS）

关键在于设置 3D 视角、翻转动作和隐藏背面可见性：

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建3D视角 */
}

.card-inner {
  width: 100%;
  height: 100%;
  position:

relative;
  transform-style: preserve-3d; /* 保持3D空间 */
  transition: transform 0.6s;
}

.card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 翻转时隐藏背面 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.front {
  background-color: #3498db;
  color: white;
}

.back {
  background-color: #e74c3c;
  color: white;
  transform: rotateY(180deg); /* 背面初始旋转180度 */
}

/* 鼠标悬停翻转 */
.card:hover .card-inner {
  transform: rotateY(180deg);
}