当前位置：首页 > article >正文

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

article 2026/3/6 5:16:14

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

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

    <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样式

/* 容器设置透视 */
.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);
}

完整代码

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

效果图

在这里插入图片描述

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

【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472 缘创作随缘，不定时更新。创作背景刚看到csdn出活动了&am…...

编程日记 2026/3/6 5:16:14

Go语言进化之旅：从1.18到1.24的语法变革

Gone 是一个基于 Go 语言开发的轻量级依赖注入框架，专注于通过模块化设计和代码生成技术，帮助开发者构建可测试、易维护的应用程序架构。推挤你使用，项目地址：https://github.com/gone-io/gone 文章目录里程碑变革：泛…...

编程日记 2026/3/4 7:23:42

玩转github

me github 可以给仓库添加开发人员吗 4o 是的，GitHub允许仓库管理员为仓库添加开发人员，并设置这些开发人员的角色和权限。这里是一个简单的步骤指导，教你如何给一个 GitHub 仓库添加开发人员： 前提条件你必须有这个仓库的权限&…...

编程日记 2026/2/23 20:01:40

Spring Boot 实战：轻松实现文件上传与下载功能

目录一、引言二、Spring Boot 文件上传基础 （一）依赖引入 （二）配置文件设置 （三）文件上传接口编写 （一）文件类型限制 （二）文件大小验证 &#xff0…...

编程日记 2026/2/15 19:28:26

java 使用命令创建jar的常用参数整理

在Java中，创建JAR文件的命令是jar。以下是常用参数的表格展示： 参数信息含义使用场景使用示例c创建新的JAR文件用于创建一个新的JAR文件当需要打包类文件和资源文件时jar cf myapp.jar MyClass.classt列出JAR文件内容显示JAR文件中的内容列表查看JAR文件…...

编程日记 2026/2/14 5:58:32

MQTT Broker搭建在Android上搭建MQTT所需工具： termux 通过网盘分享的文件：termux-app_v0.118.1+github-debug_armeabi-v7a.apk 链接: https://pan.baidu.com/s/1Iii2szXAc02cKVGdP1EuzQ?pwd=fqsc 提取码: fqsc 在 Termux 中使用 MQTT（Message Queuing Telemetry Trans…...

编程日记 2026/3/3 2:25:34

并发编程面试题二

1、java线程常见的基本状态有哪些，这些状态分别是做什么的 （1）创建（New）：new Thread()，生成线程对象。 （2）就绪（Runnable）:当调用线程对象的sta…...

编程日记 2026/3/6 18:05:31

Spring Cloud Stream - 构建高可靠消息驱动与事件溯源架构

一、引言在分布式系统中，传统的 REST 调用模式往往导致耦合，难以满足高并发和异步解耦的需求。消息驱动架构（EDA, Event-Driven Architecture）通过异步通信、事件溯源等模式，提高了系统的扩展性与可观测性。作为 S…...

编程日记 2026/3/6 3:41:41

Android第三次面试总结（activity和线程池）

1. Activity 的生命周期方法有哪些？调用顺序是什么？ 回答思路：列举 7 个核心方法并说明其触发场景。回答示例： 完整生命周期：onCreate() → onStart() → onResume() → onPause() → onStop() → onDestroy()。可见但…...

编程日记 2026/3/3 9:49:01

突破连接边界！O9201PM Wi-Fi 6 + 蓝牙 5.4 模块重新定义笔记本无线体验

在当今数字化时代，笔记本电脑已成为人们工作、学习和娱乐的必备工具。而无线连接技术，作为笔记本电脑与外界交互的关键桥梁，其性能的优劣直接关乎用户体验的好坏。当下，笔记本电脑无线连接领域存在诸多痛点，严重影响着…...

编程日记 2026/3/6 8:10:23

C语言之循环语句：程序运行的核心动力（上）

个人主页：strive-debug 在 C 语言中，分支结构可以通过 if、switch 语句来实现，循环结构则可以通过 for、while、do while 语句来实现。 if 语句 if 语句的语法形式如下： if (表达式)语句; 如果表达式成立（为真&am…...

编程日记 2026/3/4 3:05:59

Python----计算机视觉处理（Opencv：图像颜色替换）

一、开运算开运算就是对图像先进行腐蚀操作， 然后进行膨胀操作。开运算可以去除二值化图中的小的噪点，并分离相连的物体。其主要目的就是消除那些小白点在开运算组件中，有一个叫做kernel的参数，指的是核的大小，通常…...

编程日记 2026/3/6 7:20:19

【后端开发面试题】每日 3 题（十三）

✍个人博客：Pandaconda-CSDN博客 📣专栏地址：https://blog.csdn.net/newin2020/category_12903849.html 📚专栏简介：在这个专栏中，我将会分享后端开发面试中常见的面试题给大家，每天的题目都是独…...

编程日记 2026/2/14 17:11:41

一周学会Flask3 Python Web开发-SQLAlchemy查询所有数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们来新建一个的蓝图模块-班级模块，后面可以和学生模块，实现一对多的数据库操作。 blueprint下新建g…...

编程日记 2026/3/6 13:08:17

Matlab 风力发电机磁悬浮轴承模型pid控制

1、内容简介略 Matlab 174-风力发电机磁悬浮轴承模型pid控制可以交流、咨询、答疑 2、内容说明磁悬浮轴承具有无接触、无摩擦、高速度、高精度、能耗低、不需要需润滑无油污染、可靠性高、寿命长和密封等一系列显著的优点。将磁悬浮技术应用于风力发电机中可以降低风机切入…...

编程日记 2026/2/23 0:06:20

FPGA中级项目1——IP核（ROM 与 RAM）

FPGA中级项目1——IP核（ROM 与 RAM） IP核简介在 FPGA（现场可编程门阵列）设计中，IP 核（Intellectual Property Core，知识产权核）是预先设计好的、可重用的电路模块，用于实…...

编程日记 2026/2/16 9:05:38

Elasticsearch 向量检索详解

文章目录 1、向量检索的用途2、适用场景2.1 自然语言处理（NLP）：2.2 图像搜索：2.3 推荐系统2.4 音视频搜索 3、向量检索的核心概念3.1 向量3.2 相似度计算3.3 向量索引 4、案例：基于文本的语义搜索5、总结向量检索是 E…...

编程日记 2026/2/14 0:38:32

Matlab 基于专家pid控制的时滞系统

1、内容简介 Matlab 185-基于专家pid控制的时滞系统可以交流、咨询、答疑 2、内容说明略在处理时滞系统（Time Delay Systems）时，使用传统的PID控制可能会面临挑战，因为时滞会导致系统的不稳定或性能下降。专家PID控制通过结…...

编程日记 2026/3/4 23:15:30

Unity 笔记：在EditorWindow中绘制 Sorting Layer

在Unity开发过程中，可能会对旧资源进行批量修改，一个个手动修改费人费事，所以催生出了一堆批量工具。分享一下在此过程中绘制 Sorting Layer 面板的代码脚本。示意图： 在 EditorGUI 和 EditorGUILayer 中内置了 SortingLayerF…...

编程日记 2026/3/6 21:17:41

2024浙江大学计算机考研上机真题

2024浙江大学计算机考研上机真题 2024浙江大学计算机考研复试上机真题 2024浙江大学计算机考研机试真题 2024浙江大学计算机考研复试机试真题历年浙江大学计算机复试上机真题历年浙江大学计算机复试机试真题 2024浙江大学计算机复试上机真题 2024浙江大学计算机复试机试真题 …...

编程日记 2026/3/7 2:41:00

蓝桥杯嵌入式赛道复习笔记2(按键控制LED灯，双击按键，单击按键，长按按键）

硬件原理解释这张图展示了一个简单的按键电路原理图，其中包含四个按键（PB0、PB1、PB2、PB3、PA0），每个按键通过一个10kΩ的上拉电阻连接到VDD（电源电压），并接地（GND）。 …...

编程日记 2026/3/6 6:39:22

每天五分钟深度学习PyTorch：循环神经网络RNN的计算以及维度信息

本文重点前面我们学习了RNN从何而来，以及它的一些优点，我们也知道了它的模型的大概情况，本文我们将学习它的计算，我们来看一下RNN模型的每一个时间步在计算什么？ RNN的计算 ht-1是上一时刻的输出，xt是本时刻的输入，然后二者共同计算得到了ht，然后yt通过ht计算得到，…...

编程日记 2026/3/7 2:35:46

Ubuntu docker安装milvusdb

一、安装docker 1.更新软件包 sudo apt update sudo apt upgrade sudo apt-get install docker-ce docker-ce-cli containerd.io查看是否安装成功 docker -v二、使用国内的镜像下载 milvusdb Docker中国区官方镜像: https://registry.docker-cn.com milvusdb/milvus - Doc…...

编程日记 2026/2/23 7:44:57