答案：通过CSS的transform与transition实现卡片翻转效果，需设置perspective和preserve-3d营造3D环境，利用backface-visibility隐藏背面，正反面分别定位并初始旋转背面180度，悬停时通过rotateY切换角度完成翻转动画，配合过渡效果和阴影提升视觉质感，适用于产品展示等场景。
卡片翻转效果是CSS中常见且实用的交互设计，适合用在产品展示、人物介绍等场景。通过transform: rotateY()结合transition，可以轻松实现平滑的翻转动画。下面带你一步步完成一个基础但完整的卡片翻转组件。
1. 基础结构：HTML布局
卡片通常包含正面和背面两个面，使用一个外层容器包裹这两个部分。
<div class="card"> <div class="card-face front">正面内容</div> <div class="card-face back">背面内容</div> </div>
外层.card作为翻转容器，内部两个子元素分别代表正反面。
2. 设置3D空间与翻转容器
要让旋转有立体感，必须启用3D变换环境。
立即学习“前端免费学习笔记（深入）”；
关键属性：
-
perspective：定义观察者与元素之间的距离，产生透视效果。 -
transform-style: preserve-3d：确保子元素也处于3D空间中。
.card {
width: 200px;
height: 300px;
perspective: 1000px;
position: relative;
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.6s ease;
}
backface-visibility: hidden用于隐藏元素背面，避免翻转时看到反向文字。
3. 正反面定位与初始状态
正面朝前，背面绕Y轴旋转180度，初始隐藏。
.front {
background: #4a90e2;
color: white;
}
.back {
background: #50c878;
color: white;
transform: rotateY(180deg);
}
4. 添加翻转交互：悬停触发
当鼠标悬停在卡片上时，让整个.card容器内的两面一起翻转。
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
这样在悬停时，正面转到背后，背面转到前面，实现“翻牌”效果。
5. 可选增强：添加阴影与缓动优化
提升视觉质感：
.card-face {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
你也可以把transition加在.card-face上，控制动画更细腻。
实现卡片翻转的核心是：开启3D空间 + 隐藏背面 + 过渡动画 + 悬停控制旋转角度。这个模式可在轮播图、游戏卡牌、信息提示等多种初级项目中复用。
基本上就这些，不复杂但容易忽略细节，比如preserve-3d和backface-visibility，一旦漏掉，效果就会出问题。
