使用CSS transform和transition可实现网页卡片翻转效果。1. HTML结构由外层容器与前后两面div构成；2. CSS设置perspective创造3D透视，transform-style: preserve-3d保持3D空间；3. 正面初始不旋转，背面用rotateY(180deg)隐藏；4. 通过:hover触发父容器或子元素rotateY(180deg)翻转；5. backface-visibility: hidden防止背面透出，transition确保动画流畅。整个过程无需JavaScript，仅靠CSS即可完成平滑翻牌效果。
想让网页中的卡片产生翻转效果，比如像翻牌一样展示背面内容，可以使用CSS的transform配合rotateY和transition来实现。整个过程不需要JavaScript，仅靠CSS就能完成平滑动画。
基本结构：HTML布局
卡片翻转需要一个外层容器包裹前后两个面，通常使用两个 关键在于使用 以下是主要样式： 立即学习“前端免费学习笔记（深入）”； .card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; / 隐藏背面不可见时的元素 /
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.6s ease;
} .front {
background: #fff;
} .back {
background: #007bff;
color: white;
transform: rotateY(180deg); / 背面初始旋转180度 /
} 通过:hover伪类触发翻转，鼠标移上时让整个卡片旋转180度，此时背面会转到前面。 .card:hover .back {
transform: rotateY(0deg);
} 注意：我们是对两个面分别控制旋转，确保翻转过程中视觉连贯。也可以将 .card:hover .card-inner {
transform: rotateY(180deg);
} .front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
} .back {
transform: rotateY(180deg);
} 要点总结： 基本上就这些，不复杂但容易忽略细节。只要结构清晰、层级正确，卡片翻转效果就能稳定呈现。
CSS核心：设置3D变换与过渡
transform-style: preserve-3d保持3D空间，再通过rotateY控制旋转角度，结合transition让变化平滑。
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px; /* 创建3D透视感 */
}
触发翻转：悬停或点击状态
.card:hover .front {
transform: rotateY(-180deg);
}
transform直接应用在父容器上简化逻辑：
.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
perspective 决定3D视觉距离，值越大越像远观transform-style: preserve-3d 确保子元素也在3D空间中渲染backface-visibility: hidden 防止背面在不该显示时透出transition 添加动画流畅感，建议用ease或cubic-bezier
