答案是结合CSS的transform、perspective和Grid布局实现卡片翻转。首先用display: grid创建三列网格，设置gap和padding；每个.card启用transform-style: preserve-3d并添加过渡动画；通过.card-front和.card-back定义正反面，利用backface-visibility: hidden隐藏背面，初始使.card-back旋转180度；可通过:hover触发transform: rotateY(180deg)实现悬停翻转，或用JavaScript点击切换flipped类；最后在.grid-container上设置perspective: 1000px增强3D视觉深度，确保翻转效果自然立体。
想让Grid布局中的卡片实现翻转效果，关键在于结合CSS的transform和perspective属性，配合grid进行整体排版。整个过程不难，只要理解3D变换逻辑和容器层级关系就能轻松实现。
基本Grid布局搭建
先用CSS Grid创建一个整齐的卡片网格。设置容器为display: grid，并定义行列结构。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.card {
width: 100%;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.grid-container:hover .card {
transform: rotateY(180deg);
}
上面代码创建了一个三列网格，每个.card预留3D空间（transform-style: preserve-3d），并添加过渡动画。
制作前后两面内容
卡片翻转需要正面和背面两个元素。利用伪类或独立标签分别定义内容。
立即学习“前端免费学习笔记（深入）”；
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.card-front {
background: #3498db;
color: white;
}
.card-back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}
backface-visibility: hidden确保背面在正面朝前时不显示，反之亦然。.card-back默认旋转180度，等待翻转后显现。
触发翻转的方式
你可以通过多种方式触发翻转，比如悬停父容器、单个卡片或使用JavaScript控制。
- 鼠标悬停在单个卡片上翻转：
.card:hover { transform: rotateY(180deg); } - 点击切换可用JS动态添加类：
- CSS中定义
.flipped { transform: rotateY(180deg); }
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
});
优化视觉深度
为了让翻转更有立体感，给父容器添加perspective。
.grid-container {
perspective: 1000px;
}
这个值模拟人眼观察距离，数值越小透视越强，翻转时变形越明显。一般800px–1200px比较自然。
基本上就这些。Grid负责布局，transform实现动效，两者结合灵活又直观。注意层级和可见性控制，翻转效果就能稳定呈现。
