卡片翻转效果的实现思路
HTML 基础布局
<div class="card"><img class="face" src="images/chrome_eSCSt8hUpR.png" /><p class="back"><span>背面背景</span></p>
</div>
布局完成后如下所示:
CSS 实现步骤
- 鼠标悬停时卡片旋转,但此时没有动画效果,需要添加卡片的过渡动画效果:
.card:hover .face {transform: rotateY(-180deg);
}
- 为卡片的正面添加过渡效果,并在反转时隐藏:
.face {transition: 0.5s;backface-visibility: hidden;
}
此时的效果如下:
- 创建一个 3D 场景,为卡片添加
perspective
属性:
.card {perspective: 500px;
}
CSS 属性
perspective
用于创建一个 3D 场景,控制元素在该场景中的视角和深度感。它定义了观察者与元素之间的距离,从而影响元素的透视效果。在给定的样式代码中,
.card
类被赋予了perspective: 500px;
属性。这意味着该类中的元素将具有 500 像素的透视效果。透视效果使得元素在视觉上具有远近感,离观察者越近的元素看起来越大,离观察者越远的元素看起来越小。通过设置透视效果,可以在一些 3D 转换中产生更真实的效果,例如在鼠标悬停时翻转卡片。
请注意,透视效果只对具有 3D 转换属性(例如
rotateX
、rotateY
等)的元素起作用。
完整的 CSS 代码如下:
.back {transform: rotateY(180deg);backface-visibility: hidden;transition: all 0.5s;
}.card:hover .back {transform: rotateY(0);
}.card:hover .face {transform: rotateY(-180deg);
}.face {transition: 0.5s;backface-visibility: hidden;
}.card {perspective: 500px;
}
这段样式的作用是在鼠标悬停在.card
元素上时,通过旋转.back
元素的 Y 轴,实现卡片翻转的效果。初始状态下,.back
元素背面朝向前面,当鼠标悬停时,通过旋转使其正面朝向前面,从而呈现卡片翻转的动画效果。过渡效果的添加使得翻转过程更加平滑。透视效果通过设置.card
元素的perspective
属性来实现,增强了翻转效果的真实感。