一、引言
在网页设计中,为了增加用户的交互体验和视觉吸引力,常常会运用一些独特的效果。本文将详细介绍一个基于 HTML 和 CSS 实现的 3D 翻转卡片效果,通过对代码的剖析,让你了解如何创建一个具有立体感的卡片,在鼠标悬停时实现前后两面的翻转切换。
二、HTML 结构
这段代码的 HTML 部分相对简洁,主要构建了卡片的基本结构。最外层是一个div元素,类名为card-container,它作为卡片的容器,用于包裹卡片的正面和背面。
在card-container内部,有两个div元素,分别是类名为cover的正面和类名为back的背面。cover和back都包含了一些文本内容(这里是 "COVER" 和 "BACK",实际展示中图片会覆盖这些文本),它们的作用是分别展示卡片的两个不同面。
三、CSS 样式解析
- 页面整体布局 :
body元素通过display: flex;、align-items: center;和justify-content: center;设置了弹性布局,使得页面内容在垂直和水平方向上都居中显示,并且height: 100vh;确保了body占据整个视口的高度。 - 卡片容器样式 :
card-container类定义了卡片容器的样式。width: 300px;和height: 400px;设置了容器的宽度和高度。position: relative;使其成为相对定位元素,为内部的绝对定位元素提供参考。perspective: 1000px;属性为容器设置了透视效果,这是实现 3D 效果的关键,它决定了元素在 3D 空间中的深度感,数值越大,元素看起来越远,3D 效果越不明显;数值越小,3D 效果越强烈。 - 卡片正面和背面样式 :
cover和back类都设置了width: 100%;和height: 100%;,使其填满整个卡片容器。position: absolute;将它们设置为绝对定位,以便在容器内自由放置。backface-visibility: hidden;是一个重要的属性,它确保当元素翻转时,背面不会显示出来,从而实现真正的翻转效果。transition: transform 0.5s ease-in-out;定义了元素在变换(这里是翻转)时的过渡效果,持续时间为 0.5 秒,过渡效果为ease-in-out,即开始和结束时缓慢,中间过程较快。cover类通过background-image: url("./assets/movie-poster/m-byxz.jpg");设置了背景图片,background-size: cover;使背景图片完全覆盖元素,并且保持图片的纵横比。初始状态下,transform: rotateY(0deg);表示元素在 Y 轴上旋转 0 度,即正面朝向用户。back类同样通过background-image: url("./assets/movie-poster/m-dbs.jpg");和background-size: cover;设置背景图片。transform: rotateY(180deg);表示元素在 Y 轴上旋转 180 度,即背面朝向用户。
- 鼠标悬停效果 :通过
:hover伪类来实现鼠标悬停时的效果。当鼠标悬停在card-container上时,card-container:hover .cover规则使cover元素在 Y 轴上旋转 180 度,从而展示背面;card-container:hover .back规则使back元素在 Y 轴上旋转 0 度,展示正面,这样就实现了卡片的翻转效果。
完整代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/global.css" />
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card-container {
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}
.cover,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.5s ease-in-out;
}
.cover {
background-image: url("./assets/movie-poster/m-byxz.jpg");
background-size: cover;
transform: rotateY(0deg);
}
.back {
background-size: cover;
background-image: url("./assets/movie-poster/m-dbs.jpg");
transform: rotateY(180deg);
}
.card-container:hover .cover {
transform: rotateY(180deg);
}
.card-container:hover .back {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="card-container">
<div class="cover">COVER</div>
<div class="back">BACK</div>
</div>
</body>
</html>