在网页设计和前端开发中，制作翻转卡片效果是一种常见的技巧，可以为用户带来更丰富的交互体验。下面我们将深入解析一段实现卡片翻转效果的 CSS 代码，以便更好地理解其工作原理。
代码解析
<body>
<div class="card">
<div class="card__side front">front</div>
<div class="card__side back">back</div>
</div>
</body>body {
padding: 0;
margin: auto;
}
.card {
perspective: 1500px;
position: relative;
}
.card__side {
height: 500px;
width: 350px;
position: absolute;
top: 40px;
left: 40%;
/* 隐藏背面 */
backface-visibility: hidden;
transition: all 0.8s ease;
}
.front {
background-color: pink;
}
.back {
background-color: orange;
transform: rotateY(-180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0);
}
perspective: 1500px;设置了透视距离。backface-visibility: hidden;确保背面元素在翻转时不可见。- 当鼠标悬停在
.card元素上时，.front和.back元素的旋转角度会发生变化，从而实现翻转效果。过程解释：当页面加载时，卡片的正面和背面被定位到相同的位置，并且背面被旋转了180度，因此不可见。当鼠标悬停在卡片上时，.front元素旋转至-180度，背面元素.back旋转至0度，从而使得背面元素显示在正面元素的背后，形成翻转效果。鼠标移开时，过渡效果再次触发，恢复到初始状态。
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
