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

【CSS动画02--卡片旋转3D】

news 2026/2/3 1:32:35

CSS动画02--卡片旋转3D

  • 介绍
  • 代码
    • HTML
    • CSS

css动画02--旋转卡片3D

介绍

当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转，以下是几张图片的介绍，上面是鄙人自己录得一个供大家参考的小视频🤭
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>旋转卡片3D</title><link rel="stylesheet" href="./css/2.css">
</head><body><div class="card"><div class="front"><p>Let Us Miss！</p></div><div class="back"><p>Karry~</p><p>JackSon~</p><p>Roy~</p><p>Clover~</p></div></div>
</body></html>

CSS

*{margin:0;padding:0;
}
body{/* 弹性布局，让页面元素水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 设置body高度为100%窗口高度 */height:100vh;/* 背景渐变色 */background-image: linear-gradient(200deg,#5ee7df,#b490ca);/* 大家看到不同了吗？不过看起来有些许夸张 *//* 现在就正常多啦 *//* 没加这个属性之前，我们的动画看起来有点生硬，没有任何立体感，所以我们需要添加这个属性来增加卡片旋转时的立体感，这个值越小，立体感就会越明显，立体感最明显的地方就是近大远小，这个的意思就是设置视距，相当于你的眼睛离一个东西的距离，当这个东西离你的眼睛越近，那么这个东西就会越大 */perspective: 1000px;
}
.card{/* 相对定位 */position: relative;width: 300px;height: 450px;/* 圆角 */border-radius: 30px;/* 鼠标移到元素上光标变为小手 */cursor: pointer;background-color: #fff;/* 盒子阴影 */box-shadow: 1px 1px 20px rgba(0,0,0,0.1);/* 给父元素添加一个3D盒子属性，那么子元素就到背面了，这个属性是加到父元素上的，但是影响的是子元素 */transform-style: preserve-3d;/* 给卡片添加默认动画 */animation: rotate-reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
/* 设置鼠标移入卡片时执行动画 */
.card:hover{/* 动画（名称 时长 第三个属性是贝塞尔曲线，我们可以自定义动画的运动轨迹，让动画的运动轨迹有了很多种可能 第四个属性是当我们的动画完成时的状态，一般动画完成之后就回到了0%的状态，默认值是backwards，当我们给的属性值是forwards时，那么动画到100%的时候就会停下来，不会回到0%） */animation: rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.front,.back{/* 绝对定位 子元素是绝对定位，父元素需要相对定位 */position:absolute;top: 0;left: 0;width:100%;height:100%;/* 弹性布局，让元素垂直陈列 */display: flex;flex-direction: column;/* 现在子元素垂直陈列，那么就是让子元素水平居中 */align-items: center;/* 平均分配高度给每一个子元素 */justify-content: space-around;font-size: 20px;background-color: #fff;border-radius: 30px;/* 隐藏旋转div元素的背面 */backface-visibility: hidden;
}
.back{/* 因为背面卡片要到后面去，所以我们给背面卡片加一个沿Y轴旋转180度的属性，这里我们可以看到旋转了，但是没到后面去，原因就是父盒子现在不是3D盒子，而是一个2D盒子，所以我们需要让父元素变成一个3D盒 */transform: rotateY(180deg);
}
/* 接下来我们定义一下旋转动画 */
@keyframes rotate{0%{transform: rotateY(0deg);}100%{transform: rotateY(180deg);}
}
@keyframes rotate-reverse{0%{transform: rotateY(180deg);}100%{transform: rotateY(0deg);}
}

相关文章：

【CSS动画02--卡片旋转3D】

CSS动画02--卡片旋转3D 介绍代码HTMLCSS css动画02--旋转卡片3D 介绍 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360的旋转&#xff0c;以下是几张图片的介绍&#xff0c;上面是鄙人自己录得一个供大家参考的小视频&#x1f92d; 代码 HTML <!DOCTYPE html>…...

编程日记 2023/8/21 5:16:16

数据结构＜树和二叉树＞顺序表存储二叉树实现堆排

✨Blog&#xff1a;&#x1f970;不会敲代码的小张:)&#x1f970; &#x1f251;推荐专栏&#xff1a;C语言&#x1f92a;、Cpp&#x1f636;‍&#x1f32b;️、数据结构初阶&#x1f480; &#x1f4bd;座右铭&#xff1a;“記住&#xff0c;每一天都是一個新的開始&#x1…...

编程日记 2023/8/21 5:15:15

理解docker命令

基础命令 帮助命令 docker --help&#xff08;帮助命令&#xff09; 用于获取某个命令的帮助信息 #命令帮助 docker 命令 --help 小技巧 换行符 \ 使用命令换符&#xff0c;可以让繁杂命令变得有条理 #命令换行&#xff0c;使用换行符 \ docker ... \... \ 镜像命令 d…...

编程日记 2023/8/21 5:14:14

【SA8295P 源码分析】16 - QNX侧 TouchScreen Panel （TP）线程函数 tp_recv_thread 源码分析

【SA8295P 源码分析】16 - QNX侧 TouchScreen Panel （TP）线程函数 tp_recv_thread 源码分析 一、TP 线程函数：tp_recv_thread()二、处理&上报 坐标数据 cypress_read_touch_data()系列文章汇总见：《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接：《【SA8295P…...

编程日记 2023/8/21 5:13:13

第九章MyBatis的技巧

${}和#{}的区别 #{}给sql语句的占位符传值${}直接将值拼接到sql语句上&#xff0c;存在sql注入的现象 什么时候用${} 需要先对sql语句拼接&#xff0c;然后再编译。 字符串排序字段向SQL语句中拼接表名。比如根据日期生成日志表 批量删除 delete from car where in(${ids}…...

编程日记 2023/8/21 5:12:11

计算机技术与软件专业技术资格（水平）考试----系统架构设计师

【原文链接】计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试----系统架构设计师 考试简介 计算机软件资格考试是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试。计算机软件资格考试既是职业资格考试&#xff0c;又是职称资格考试。考试合格…...

编程日记 2023/8/21 5:11:10

使用nrm快速切换npm源以及解决Method Not Implemented

文章目录 什么是nrm如何使用nrm查看本机目前使用的npm 源安装nrm查看可选源查看当前使用源切换源添加源删除源测试源的响应时间 如果你遇到这个报错&#xff0c;就可以采用这种方案解决哦解决方案&#xff1a;1. 切换为官方源2. 查看漏洞3. 修复漏洞4. 下面命令慎重使用&#x…...

编程日记 2023/8/21 5:10:09

NVIDIA Jetson 项目：机器人足球比赛

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑器的3D应用场景 事实上&#xff0c;整个比赛都致力于这个想法。RoboCup小型联盟&#xff08;SSL&#xff09;视觉停电技术挑战赛鼓励团队“探索本地传感和处理&#xff0c;而不是非车载计算机和全球摄像机感知环境的…...

编程日记 2023/8/21 5:09:08

【论文解读】Hybrid-SORT: Weak Cues Matter for Online Multi-Object Tracking

因为Hybrid-SORT的baseline是基于OCSORT进行改进的&#xff0c;在这之前建议先了解byteTrack和【】的相关知识 1.介绍 1.1 基本框架 多目标跟踪(MOT)将问题分为两个子任务。第一个任务是检测每个帧中的对象。第二个任务是将它们在不同的框架中联系起来。关联任务主要通过显式…...

编程日记 2023/8/21 5:08:06

Microsoft 图像BERT，基于大规模图文数据的跨模态预训练

视觉语言任务是当今自然语言处理&#xff08;NLP&#xff09;和计算机视觉领域的热门话题。大多数现有方法都基于预训练模型&#xff0c;这些模型使用后期融合方法融合下游任务的多模态输入。然而&#xff0c;这种方法通常需要在训练期间进行特定的数据注释&#xff0c;并且对于…...

编程日记 2023/8/21 5:07:04

vue3+elementUI-plus实现select下拉框的虚拟滚动

网上查了几个方案&#xff0c;要不就是不兼容&#xff0c;要不就是不支持vue3, 最终找到一个合适的&#xff0c;并且已上线使用&#xff0c;需要修改一下样式&#xff1a; 代码如下&#xff1a; main.js里引用 import vue3-virtual-scroller/dist/vue3-virtual-scroller.css; …...

编程日记 2023/8/21 5:06:02

学C的第三十四天【程序环境和预处理】

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 学C的第三十三天【C语言文件操作】_高高的胖子的博客-CSDN博客 1 . 程序的翻译环境和执行环境 在ANSI C(C语言标准)的任何一种实现中&#xff0c;存在两个不同的环境。 &#xff0…...

编程日记 2023/8/21 5:05:01

微服务中间件--Ribbon负载均衡

Ribbon负载均衡 a.Ribbon负载均衡原理b.Ribbon负载均衡策略 (IRule)c.Ribbon的饥饿加载 a.Ribbon负载均衡原理 1.发起请求http://userservice/user/1&#xff0c;Ribbon拦截该请求 2.Ribbon通过EurekaServer拉取userservice 3.EurekaServer返回服务列表给Ribbon做负载均衡 …...

编程日记 2023/8/21 5:03:59

字符设备驱动实例（ADC驱动）

四、ADC驱动 ADC是将模拟信号转换为数字信号的转换器&#xff0c;在 Exynos4412 上有一个ADC&#xff0c;其主要的特性如下。 (1)量程为0~1.8V。 (2)精度有 10bit 和 12bit 可选。 (3)采样时钟最高为5MHz&#xff0c;转换速率最高为1MSPS (4)具有四路模拟输入&#xff0c;同一时…...

编程日记 2023/8/21 5:02:58

python基础5——正则、数据库操作

文章目录 一、数据库编程1.1 connect()函数1.2 命令参数1.3 常用语句 二、正则表达式2.1 匹配方式2.2 字符匹配2.3 数量匹配2.4 边界匹配2.5 分组匹配2.6 贪婪模式&非贪婪模式2.7 标志位 一、数据库编程 可以使用python脚本对数据库进行操作&#xff0c;比如获取数据库数据…...

编程日记 2023/8/21 5:01:57

SpringAOP原理：手写动态代理实现

0、基础知识 AOP我们知道&#xff0c;是在不修改源代码的情况下&#xff0c;为代码添加一些新功能的技术。通过动态代理&#xff0c;可以在不修改原始类代码的前提下&#xff0c;对方法进行拦截和增强。 动态代理常用于在不改变原有业务逻辑的情况下&#xff0c;对方法…...

编程日记 2023/8/21 5:00:55

【旅游度假】Axure酒店在线预订APP原型图 旅游度假子模块原型模板

作品概况 页面数量&#xff1a;共 10 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;旅游度假&#xff0c;生活服务 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「酒店在线预订」的移动端…...

编程日记 2023/8/21 4:59:53

Android JNI系列详解之CMake和ndk-build编译工具介绍

一、前提 CMake和ndk-build只是编译工具&#xff0c;本次主要介绍ndk-build和CMake的区别&#xff0c;下节课介绍他们的使用。 二、CMake工具介绍 CMake&#xff1a;cross platform make&#xff0c;是跨平台的编译工具 CMake是在AndroidStudio2.2之后引入&#xff08;目前默认…...

编程日记 2023/8/21 4:58:52

【Linux取经路】解析环境变量，提升系统控制力

文章目录 一、进程优先级1.1 什么是优先级&#xff1f;1.2 为什么会有优先级&#xff1f;1.3 小结 二、Linux系统中的优先级2.1 查看进程优先级2.2 PRI and NI2.3 修改进程优先级2.4 进程优先级的实现原理2.5 一些名词解释 三、环境变量3.1 基本概念3.2 PATH&#xff1a;Linux系…...

编程日记 2023/8/21 4:57:50

TCP编程流程（补充）

目录 1、listen&#xff1a; 2、listen、tcp三次握手 3、 发送缓冲区和接收缓冲区&#xff1a; 4、tcp编程启用多线程 1、listen&#xff1a; 执行listen会创建一个监听队列 listen(sockfd,5) 2、listen、tcp三次握手 三次握手 3、 发送缓冲区和接收缓冲区&#xff1a;…...

编程日记 2023/8/21 4:56:48

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2026/1/26 9:07:56