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

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

news 2025/7/3 13:53:02

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/6/17 7:15:49

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/6/26 9:15:41

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/3 11:48:39

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/7/2 8:50:20

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/6/16 7:49:31

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/6/27 18:40:12

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/7/3 12:40:02