HTML&CSS：惊爆！3D 翻转卡片，图片信息惊艳呈现

yycvip · 发表于昨天 21:32

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
section.card {
position: relative;
width: 350px;
height: 200px;
background-color: #474dc3;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
transition: all 0.8scubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cardsvg {
fill: #333;
transition: all 0.6scubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 3px;
}
.card:hover {
transform: scale(1.02);
box-shadow: 08px16px#000000;
background-color: #474dc3;
color: #ffffff;
}
.card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #474dc3;
transform: rotateX(-90deg);
transform-origin: bottom;
transition: all 0.6scubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover.card__content {
transform: rotateX(0deg);
}
.card__title {
margin: 0;
padding-left: 5px;
font-size: 24px;
color: var(--white);
font-weight: 700;
}
.cardimg {
width: 100%;
height: 100%;
object-fit: cover;
}
.card:hoverimg {
scale: 0;
}
.title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 5px0;
margin: 0;
color: #000000;
font-size: 18px;
background: rgba(255, 255, 255, .6);
}
.card__description {
margin: 20px00;
font-size: 14px;
color: #ffffff;
line-height: 1.8;
text-indent: 2rem;
}
</style>
</head>
<body>
<section id="card1" class="card">
<img src="./img/2.jfif" alt="">
<p class="title">还记得詹韦连线吗？</p>
<div class="card_content">
<p class="card_title">詹姆斯与韦德的空中接力</p>
<p class="card_description">
在NBA赛场上，詹姆斯与韦德的连线扣篮总是让人热血沸腾。
两位超级巨星的默契配合，让每一次空中接力都成为经典。
詹姆斯的精准传球与韦德的强力扣篮，展现了篮球运动的极致魅力。
</p>
</div>
</section>
</body>
</html>

复制代码

CSS 样式

body: 设置页面的边距、填充、背景色、显示方式和高度。
section.card: 定义卡片的基本样式，包括尺寸、背景色、边框半径、显示方式和 3D 透视效果。
.card svg: 设置 SVG 元素的填充色和过渡效果。
.card:hover: 当鼠标悬停在卡片上时，卡片会放大并添加阴影效果。
.card_content: 设置卡片内容的定位、尺寸、填充、背景色和 3D 旋转效果。
.card:hover .card_content: 当鼠标悬停在卡片上时，卡片内容会旋转到正面。
.card_title: 设置卡片标题的样式。
.card img: 设置卡片中图片的尺寸和适应方式。
.card:hover img: 当鼠标悬停在卡片上时，图片会缩放至不可见。
.title: 设置标题的定位、文本对齐和样式。
.card_description: 设置卡片描述的样式。

		自动登录	找回密码
密码			立即注册