答案：通过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 的 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);
}
3. 可选增强效果
让交互更自然，可添加以下优化：
立即学习“前端免费学习笔记（深入）”；
- 使用 cursor: pointer 提示可交互
- 给
.card-face添加边框圆角（border-radius）提升视觉效果 - 调整 transition-timing-function 如使用
cubic-bezier(0.4, 0, 0.2, 1)让动画更流畅 - 支持点击翻转：用 JavaScript 切换类名替代 hover
4. 注意事项
确保翻转正确生效：
- perspective 必须加在父容器（.card），不能直接加在翻转元素上
- transform-style: preserve-3d 要应用在执行旋转的元素（.card-inner）
- backface-visibility: hidden 防止背面内容穿透显示
基本上就这些。掌握这几个关键属性，就能做出顺滑的卡片翻转效果，适合用于产品展示、记忆卡片或信息提示等场景。
