当第一缕晨光温柔地漫过窗台，窗外的鸟鸣声清脆悦耳，这样静谧美好的清晨，最适合捧起 “知识的书本” 慢慢品读。前端的小伙伴们，别让面试的压力打破这份宁静，每天清晨和上午，给自己一段独处的时光，跟着我拆解一道 CSS 高频面试题。就像收集清晨的露珠，这些点滴知识，终将汇聚成闪耀的星河。

最近，“CSS 动画实战”“前端面试通关秘籍”“CSS 响应式设计” 等关键词热度居高不下，都是面试官重点关注的领域。今天，我们就来攻克一道超有意思的题目 ——如何用 CSS 实现一个翻牌效果的卡片？ 这种充满趣味的交互效果，不仅能为网页增添创意，掌握它还能让你在面试中脱颖而出。

方法：利用 CSS 的transform属性和:hover伪类

transform属性如同拥有神奇魔法，能让元素在空间中自由变换；:hover伪类则像一个 “开关”，触发奇妙的变化。两者配合，就能打造出惊艳的翻牌效果。

/* 卡片容器，设置相对定位，作为翻转动画的参考 */
.card-container {
position: relative;
width: 200px;
height: 300px;
margin: 50px auto;
/* 开启3D透视效果，增强立体感 */
perspective: 1000px;
cursor: pointer;
}
/* 卡片正反面，初始堆叠在一起 */
.card {
position: absolute;
width: 100%;
height: 100%;
/* 开启3D转换，为翻转做准备 */
transform-style: preserve-3d;
/* 设置过渡效果，让翻转过程更平滑 */
transition: transform 0.6s ease;
}
/* 卡片正面样式 */
.card-front {
background-color: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
backface-visibility: hidden; /* 隐藏背面，避免初始状态显示 */
}
/* 卡片背面样式 */
.card-back {
background-color: #6c757d;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
/* 翻转180度，调整到背面位置 */
transform: rotateY(180deg);
backface-visibility: hidden; /* 隐藏正面，避免翻转后重叠显示 */
}
/* 鼠标悬停时，翻转卡片 */
.card-container:hover .card {
/* 沿Y轴翻转180度，展示背面 */
transform: rotateY(180deg);
}

首先，card-container作为 “舞台”，用perspective属性开启 3D 透视，让卡片翻转更有立体感。card元素作为卡片本体，设置transform-style: preserve-3d确保在 3D 空间中翻转。card-front和card-back分别定义了卡片的正反两面样式，通过backface-visibility: hidden避免两面同时显示。当鼠标悬停在card-container上时，:hover伪类触发transform: rotateY(180deg)，让卡片沿 Y 轴翻转，实现惊艳的翻牌效果。

面试回答范本

当面试官问起如何实现翻牌效果的卡片，你可以这样回答：“我会用 CSS 的transform属性和:hover伪类来实现。先创建一个容器，用perspective属性营造 3D 空间感。卡片本身设置为 3D 转换，正反两面通过backface-visibility: hidden隐藏不需要显示的面。关键在于用:hover伪类，当鼠标悬停时，通过transform: rotateY(180deg)让卡片沿 Y 轴翻转，展示出背面内容。这种方法纯 CSS 就能完成，通过调整transition的时间和函数，还能控制翻转的速度和流畅度，很适合用在网页的交互设计中。”

在网页交互效果的实现上，有人觉得纯 CSS 的动画简洁高效，也有人认为借助 JavaScript 能实现更复杂、更智能的交互逻辑。你认为在实现翻牌效果这类交互时，纯 CSS 和 JavaScript 哪个更有优势？ 欢迎在评论区分享你的看法，和大家一起交流讨论！如果今天的内容让你有所收获，别忘了点赞关注，明天清晨，我们继续相约，解锁更多 CSS 的奇妙世界！