【css酷炫效果】纯CSS实现3D翻转卡片动画

【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>

效果图

相关推荐
柯腾啊32 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇35 分钟前
ts 定义重复对象字段
前端
HashTang1 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大4 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER4 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh5 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒5 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端