【css酷炫效果】纯CSS实现3D翻转卡片动画
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
clike
<div style='text-align:center;margin-top:50px;'>
<div class="card-container">
<div class="card">
<div class="front">正面内容</div>
<div class="back">背面内容</div>
</div>
<!-- 复制多个卡片 -->
<div class="card">...</div>
</div>
</div>css样式
clike
/* 容器设置透视 */
.card-container {
display: flex;
justify-content: center;
gap: 40px;
perspective: 1000px;
}
/* 卡片基础样式 */
.card {
width: 300px;
height: 450px;
position: relative;
cursor: pointer;
transform-style: preserve-3d; /* 启用3D空间 */
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* 正反面公共样式 */
.front, .back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden; /* 隐藏背面 */
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* 正面样式 */
.front {
background: linear-gradient(45deg, #b490ca, #5ee7df);
font-size: 30px;
color: white;
}
/* 背面旋转180度并设置不同背景 */
.back {
background: linear-gradient(45deg, #badbe9, #e0c7e3);
transform: rotateY(180deg);
}
/* 悬停触发翻转 */
.card:hover {
transform: rotateY(180deg);
}完整代码
clike
<!DOCTYPE html>
<html>
<head>
<style>
/* 容器设置透视 */
.card-container {
display: flex;
justify-content: center;
gap: 40px;
perspective: 1000px;
}
/* 卡片基础样式 */
.card {
width: 300px;
height: 450px;
position: relative;
cursor: pointer;
transform-style: preserve-3d; /* 启用3D空间 */
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* 正反面公共样式 */
.front, .back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden; /* 隐藏背面 */
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* 正面样式 */
.front {
background: linear-gradient(45deg, #b490ca, #5ee7df);
font-size: 30px;
color: white;
}
/* 背面旋转180度并设置不同背景 */
.back {
background: linear-gradient(45deg, #badbe9, #e0c7e3);
transform: rotateY(180deg);
}
/* 悬停触发翻转 */
.card:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div style='text-align:center;margin-top:50px;'>
<div class="card-container">
<div class="card">
<div class="front">正面内容</div>
<div class="back">背面内容</div>
</div>
<!-- 复制多个卡片 -->
<div class="card">...</div>
</div>
</div>
</body>
</html>效果图
