答案：通过CSS的transform和position实现卡片翻转。先构建.card容器及front、back子元素，设position:relative和absolute使两面重叠；在.card上设置perspective和transform-style:preserve-3d建立3D环境；.face统一样式并用backface-visibility:hidden隐藏背面，.back初始rotateY(180deg)；最后为.card添加hover时的rotateY(180deg)过渡动画，实现平滑翻转。注意定位与层级避免错位。
在CSS中实现卡片翻转效果，通常使用 transform: rotate 结合 position 定位来完成前后两面的叠加与视觉呈现。关键在于让前后两个面共享同一空间，并通过旋转Y轴实现翻转动画。以下是具体实现方法。
1. 基础结构：创建翻转容器
使用一个外层容器（.card）作为翻转的主体，内部包含 front 和 back 两个子元素。这两个面需要通过绝对定位堆叠在一起。
正面内容背面内容
2. 设置公共定位与3D环境
为实现立体翻转，必须启用3D变换。父容器设置 perspective 控制视觉距离，翻转主体（.card）开启 transform-style: preserve-3d 保留3D空间。
.card {
position: relative;
width: 200px;
height: 300px;
perspective: 1000px; /* 模拟景深 */
}
.card .face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; / 隐藏背面不可见时的内容 /
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.front {
background: #fff;
color: #000;
z-index: 1;
}
.back {
background: #007bff;
color: white;
transform: rotateY(180deg); / 背面初始旋转180度 /
}
3. 实现翻转动画
通过给 .card 添加 hover 状态，触发整体绕Y轴旋转180度，此时背面会转到前面。
立即学习“前端免费学习笔记（深入）”；
.card:hover {
transform: rotateY(180deg);
transition: transform 0.6s ease;
}
.card {
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
注意：transition 加在 .card 上，保证翻转过程平滑；backface-visibility 避免翻转过程中看到反向内容。
4. 定位细节与常见问题
使用 position: absolute 让 front 和 back 精确重叠。若未正确堆叠，检查以下几点：
- 父容器（.card）是否有 position: relative
- 两个面是否设置了相同的 width/height
- 是否遗漏 backface-visibility: hidden
- z-index 设置是否干扰了显示顺序（front 可设 z-index: 1，back 不设或为 0）
基本上就这些。只要结构清晰、定位准确、3D变换开启，就能实现流畅的卡片翻转效果。不复杂但容易忽略细节。
