- A+
卡片翻转效果在现代网页设计中很常见，比如商品展示、图片墙或信息提示卡片。利用CSS的transform: rotateY()和transition属性，可以轻松实现平滑的3D翻转动画。下面详细介绍如何一步步实现这一效果。
基本结构：创建前后两面卡片
要实现翻转，需要一个容器包裹前后两个面。通常使用一个父元素作为翻转容器，内部包含正面和背面两个子元素。
HTML结构如下：
<div class="card"> <div class="card-face front">正面内容</div> <div class="card-face back">背面内容</div> </div>
其中.card是翻转的主体，.front和.back分别代表正反两面。
立即学习“前端免费学习笔记（深入）”；
CSS关键设置：启用3D变换与过渡
为了让翻转具有3D感，必须在父容器上设置perspective，并为翻转元素开启3D渲染上下文。
核心样式包括：
- perspective：定义观察者距离元素的视觉距离，通常加在父容器外层或卡片本身。
- transform-style: preserve-3d：确保子元素在3D空间中渲染。
-
transition：为
transform添加过渡动画，使旋转更自然。
.card {
width: 200px;
height: 300px;
position: relative;
perspective: 1000px;
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.6s;
}
.front {
background-color: #3498db;
color: white;
}
.back {
background-color: #e74c3c;
color: white;
transform: rotateY(180deg);
}
注意：backface-visibility: hidden用于隐藏元素背面，避免翻转时看到反向文字。
触发翻转：使用:hover或JavaScript控制状态
最简单的方式是通过:hover伪类触发翻转。
AI艺术绘画生成器
35
查看详情
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
当鼠标悬停在卡片上时，正面旋转到背面，背面从180度转回0度，实现翻转切换。
若需更复杂控制（如点击翻转），可用JavaScript动态添加类：
document.querySelector('.card').addEventListener('click', function() {
this.classList.toggle('flipped');
});
配合CSS：
.card.flipped .front {
transform: rotateY(-180deg);
}
.card.flipped .back {
transform: rotateY(0deg);
}
优化细节：提升视觉体验
为了让动画更自然，可调整transition-timing-function，例如使用cubic-bezier(0.4, 0, 0.2, 1)获得缓入缓出效果。
同时确保背面内容在初始状态下正确翻转，避免文字镜像显示。
若多张卡片排列，建议设置transform-style: preserve-3d在翻转容器上，避免平面塌陷。
基本上就这些。掌握rotateY、transition和3D相关属性后，卡片翻转不难实现，关键是结构清晰和CSS层级合理。实际项目中可结合图片、阴影和响应式设计进一步美化。
