答案是使用CSS的transform、perspective和backface-visibility属性，结合:hover或:checked选择器实现卡片翻转。首先设置父容器的perspective营造3D视觉，然后通过.transform-style: preserve-3d保持3D空间，利用transform: rotateY(180deg)实现翻转动画，前后两面用backface-visibility: hidden避免重叠显示，结构上采用包含前后两面的.card容器，可通过:hover触发悬停翻转，或用隐藏复选框配合:checked实现点击切换，整个过程无需JavaScript即可完成交互效果。
要实现卡片翻转效果，关键在于使用 CSS 的 transform 和 perspective 属性，结合伪类选择器和过渡动画。整个过程不依赖 JavaScript，仅通过 CSS 选择器即可完成基础的悬停翻转交互。
1. 设置容器透视（perspective）
为了让翻转具有 3D 效果，父容器需要设置 perspective，模拟视觉景深。
通常这样写：.card-container {
perspective: 1000px;
}
2. 定义翻转卡片结构
HTML 结构一般包含外层容器、翻转盒子和前后两个面：
正面内容背面内容
3. 使用 transform 实现翻转
通过 :hover 选择器触发翻转，利用 transform: rotateY() 实现 Y 轴旋转。
立即学习“前端免费学习笔记（深入）”；
关键样式如下：
.card {
position: relative;
width: 200px;
height: 300px;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
}
说明：
- transform-style: preserve-3d 确保子元素保持 3D 空间。
- backface-visibility: hidden 防止背面在正面显示时被看到。
- 背面预先旋转 180 度，翻转后正好正对用户。
4. 可选：添加点击切换效果
如果想用点击代替悬停，可以结合 :checked 选择器与隐藏的复选框或 radio 按钮。
CSS 中使用 :checked ~ 选择器控制状态：
#flip-toggle:checked ~ .card {
transform: rotateY(180deg);
}
基本上就这些。通过合理的结构和 CSS 选择器（如 :hover、:checked），配合 transform 和过渡属性，就能实现流畅的卡片翻转效果。关键是理解 3D 变换的层级关系和可见性控制。不复杂但容易忽略细节。
