如何用CSS实现Hover时卡片翻转显示背面？请求修复代码
2026-5-7
修复卡片翻转效果的方案
我来帮你搞定这个卡片翻转的问题！你的代码已经搭好了基础框架，但缺了几个实现3D翻转的关键CSS属性，所以才会出现正面转了但背面没显示的情况。下面是修复后的完整代码，还有详细的修改原因：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Card Flip Effect</title> <style> .content { position: relative; width: 200px; height: 200px; /* 开启3D透视，让翻转有真实的深度感 */ perspective: 1000px; /* 保持子元素的3D空间关系，不让它们扁平化 */ transform-style: preserve-3d; } .front, .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; /* 翻转后隐藏自身的背面，避免正反两面互相穿透显示 */ backface-visibility: hidden; /* 给两个面都加上过渡动画，让翻转更丝滑 */ transition: transform 0.5s ease; /* 新增：让文字居中，视觉效果更好 */ display: flex; justify-content: center; align-items: center; color: white; } .front { background: darkred; /* 正面默认在顶层，确保初始状态能看到 */ z-index: 2; } .back { background: darkblue; /* 初始状态下把背面翻转180度，这样一开始看不到它 */ transform: rotateY(180deg); } /* 鼠标悬停时，正面翻转180度，就看不到它了 */ .content:hover .front { transform: rotateY(180deg); } /* 同时让背面转回来，显示出来 */ .content:hover .back { transform: rotateY(0deg); } </style> </head> <body> <div class="content"> <div class="front">Hello</div> <div class="back">Bye</div> </div> </body> </html>
关键修改拆解：
给父元素
.content加3D空间属性：perspective: 1000px：创建虚拟的“镜头”，让3D变换有远近深度感，不然翻转只是平面转圈，没有立体效果。transform-style: preserve-3d：必须添加这个属性，否则子元素的3D变换会被压缩成2D，背面永远无法正常显示。
给正反两面加
backface-visibility: hidden：
这个属性的作用是，元素翻转后自身的“背面”会被隐藏。比如正面翻转180度后，它的背面朝向我们，这个属性会让它直接消失，这样背面的内容才能顺利露出来。默认把背面转180度：
初始状态下正反面是完全重叠的，我们先把背面转180度藏起来。当正面翻转180度时，再把背面转回来，刚好完成正反面的切换显示。优化过渡动画：
把过渡属性同时加到两个面上，而不是只给正面，这样正反面的翻转动画都会更自然流畅。另外我还加了flex布局让文字居中，提升视觉体验~
这样修改后，你鼠标悬停上去，正面会平滑旋转隐藏，背面同步显示出来，完美实现你想要的卡片翻转效果！
内容的提问来源于stack exchange，提问作者user
