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