可以通过CSS3中的transform属性和transition属性来实现HTML卡片的翻转效果。具体步骤如下：
<div class="card">
<div class="front">
<h3>正面</h3>
<p>这是卡片的正面</p>
</div>
<div class="back">
<h3>反面</h3>
<p>这是卡片的反面</p>
</div>
</div>.card {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background-color: #fff;
perspective: 1000px; /* 设置3D视角，使翻转效果更加真实 */
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面，避免翻转时出现闪烁 */
}
.front {
z-index: 2; /* 设置正面在上层 */
}
.back {
transform: rotateY(180deg); /* 默认隐藏反面 */
}.card:hover .front {
transform: rotateY(180deg); /* 翻转正面 */
}
.card:hover .back {
transform: rotateY(0deg); /* 翻转反面 */
}
.front, .back {
transition: transform .6s ease; /* 设置翻转动画效果 */
}.card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
h3 {
margin: 10px 0;
font-size: 18px;
color: #ff6600;
}完整代码如下：
<div class="card">
<div class="front">
<h3>正面</h3>
<p>这是卡片的正面</p>
</div>
<div class="back">
<h3>反面</h3>
<p>这是卡片的反面</p>
</div>
</div>.card {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background-color: #fff;
perspective: 1000px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform .6s ease;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
h3 {
margin: 10px 0;
font-size: 18px;
color: #ff6600;
}