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

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

news 文章来源：https://blog.csdn.net/Clover_zlx/article/details/132354585 2024/11/17 5:49:21

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

每天一道leetcode：433. 最小基因变化（图论中等广度优先遍历）

今日份题目&#xff1a; 基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化。 例如&#xff0c;&quo…...

编程日记 2023/8/21 4:55:47

【C++】做一个飞机空战小游戏(十)——子弹击落炮弹、炮弹与飞机相撞

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…...

编程日记 2023/8/21 4:54:46

去除UI切图边缘上多余的线条

最近接到UI切图&#xff0c;放进项目&#xff0c;显示边缘有多余线条&#xff0c;影响UI美观。开始以为切图没切好&#xff0c;实则不是。如图&#xff1a; ->解决&#xff1a; 将该图片资源WrapMode改为Clamp...

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

Spring高手之路13——BeanFactoryPostProcessor与BeanDefinitionRegistryPostProcessor解析

文章目录 1. BeanFactoryPostProcessor 概览1.1 解读 BeanFactoryPostProcessor1.2. 如何使用 BeanFactoryPostProcessor 2. BeanDefinitionRegistryPostProcessor 深入探究2.1 解读 BeanDefinitionRegistryPostProcessor2.2 BeanDefinitionRegistryPostProcessor 的执行时机2.…...

编程日记 2023/8/21 4:51:43

【LeetCode动态规划】详解买卖票I~IV，经典dp题型买

给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的最大利润。…...

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

【深入探究人工智能】：常见机器学习算法总结

文章目录 1、前言1.1 机器学习算法的两步骤1.2 机器学习算法分类 2、逻辑回归算法2.1 逻辑函数2.2 逻辑回归可以用于多类分类2.3 逻辑回归中的系数 3、线性回归算法3.1 线性回归的假设3.2 确定线性回归模型的拟合优度3.3线性回归中的异常值处理 4、支持向量机&#xff08;SVM&a…...

编程日记 2023/8/21 4:49:41

设计模式之解释器模式详解及实例

1、解释器设计模式概述&#xff1a; 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种设计模式&#xff0c;它主要用于描述如何构建一个解释器以解释特定的语言或表达式。该模式定义了一个文法表示和解释器的类结构&#xff0c;用于解释符合该文法规则的语句。解…...

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

Nodejs沙箱逃逸--总结

一、沙箱逃逸概念 JavaScript和Nodejs之间有什么区别&#xff1a;JavaScript用在浏览器前端&#xff0c;后来将Chrome中的v8引擎单独拿出来为JavaScript单独开发了一个运行环境&#xff0c;因此JavaScript也可以作为一门后端语言&#xff0c;写在后端&#xff08;服务端&#…...

编程日记 2023/8/21 4:47:38

No115.精选前端面试题，享受每天的挑战和学习

文章目录 变量提升和函数提升的顺序Event Loop封装 FetchAPI&#xff0c;要求超时报错的同时&#xff0c;取消执行的 promise&#xff08;即不继续执行&#xff09;强缓存和协商缓存的区别token可以放在cookie里吗&#xff1f; 变量提升和函数提升的顺序 在JavaScript中&#…...

编程日记 2023/8/21 4:46:34

Elasticsearch：语义搜索 - Semantic Search in python

当 OpenAI 于 2022 年 11 月发布 ChatGPT 时&#xff0c;引发了人们对人工智能和机器学习的新一波兴趣。 尽管必要的技术创新已经出现了近十年&#xff0c;而且基本原理的历史甚至更早&#xff0c;但这种巨大的转变引发了各种发展的“寒武纪大爆炸”&#xff0c;特别是在大型语…...

编程日记 2023/8/21 4:45:32

怎么做兼职网站吗/关键词指数

原文链接&#xff1a;http://blog.163.com/double_dua/blog/static/18973918320126124432099/ sublime Text 2 是一个强大的跨平台的文本编辑器。 这几天都在用这个编辑器来写C的程序。刚刚装上的时候不能编译运行啊什么的痛苦死了。编译问题 &#xff1a;首先你的电脑里面要有…...

编程日记 2024/11/17 3:45:10

化妆培训学校网站开发/seo建站优化推广

谈到企业级自助分析平台&#xff0c;大家自然会想到Tableau&#xff0c;在Garnter最新的BI平台魔力象限中&#xff0c;是这么描述Tableau的。 “Tableau is a Leader in this Magic Quadrant. It offers a visual-based exploration experience that enables business users to…...

编程日记 2024/11/17 2:33:13

知名的网站建设公司/关键词免费下载

1.下列除哪组外都是镇心安神药组&#xff08;&#xff09; A.龙骨、牡蛎 B.朱砂、磁石 C.龟板、鳖甲 D.珍珠、琥珀 E.珍珠母、紫贝齿 2.下列忌火煅的药物是&#xff08;&#xff09; A.青礞石 B.牡蛎 C.朱砂 D.石决明 E.代赭石 3.既能镇惊安神&#xff0c;平肝潜阳&#xf…...

编程日记 2024/11/17 1:34:03

建设阿里巴巴网站首页/怎么做网站关键词优化

Scala Option(选项)类型用来表示一个值是可选的&#xff08;有值或无值)。 Option[T] 是一个类型为 T 的可选值的容器&#xff1a; 如果值存在&#xff0c; Option[T] 就是一个 Some[T] &#xff0c;如果不存在&#xff0c; Option[T] 就是对象 None 。 接下来我们来看一段代码…...

编程日记 2024/11/17 1:27:58

wordpress 动态主题下载/百度推广开户多少钱一个月

算法&#xff1a; 题目&#xff1a; 计算&#xff1a; end...

编程日记 2024/11/17 1:25:56

文化传媒公司广告宣传/长春网络推广优化

Linux是支持SSH协议的&#xff0c;如果我们在Windows主机上运行的Xshell无法正常连接Linux主机&#xff0c;则首先要考虑的是不是网络不通&#xff0c;如果网络不通就看一下是不是虚拟机设置的模式不对。 其次&#xff0c;如果网络通着却无法连接&#xff0c;则考虑是不是网卡e…...

编程日记 2024/11/16 23:24:48