CSS3 变形
一、CSS3变形(Transform)是一些效果的集合,有以下几种:
- 平移(Translate):元素沿水平或垂直方向移动。
- 旋转(Rotate):元素绕某点旋转一定的角度。
- 缩放(Scale):元素按一定比例放大或缩小。
- 倾斜(Skew):元素在水平或垂直方向上倾斜。
这些变形效果可以通过CSS属性来实现,例如transform
属性。通过使用这些变形效果,可以创建各种动态的视觉效果和动画。
二、Transform语法
transform: none | <transform-function> [<transform-function>]*;
核心变换函数(transform-function)
-
2D变换函数:
translate(x, y)
/translateX(x)
/translateY(y)
移动元素(单位:px/%)scale(x, y)
/scaleX(x)
/scaleY(y)
缩放元素(无单位,1=原始大小)rotate(angle)
旋转元素(单位:deg/rad)skew(x-angle, y-angle)
/skewX(angle)
/skewY(angle)
倾斜元素(单位:deg)matrix(a, b, c, d, tx, ty)
2D矩阵变换
-
3D变换函数:
translate3d(x, y, z)
3D位移scale3d(x, y, z)
3D缩放rotate3d(x, y, z, angle)
自定义轴旋转matrix3d(...)
16参数的3D矩阵
三、2D位移
四、应用
1、translate平移
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位移变换(Translate)</title><style>body {background: #f0f0f0;font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;margin: 0;padding: 0;}.box {width: 100px;height: 100px;background: #e441c0;border-radius: 10px;transition: transform 0.5s; /* 变换过渡时间0.5s */margin: 50px auto;line-height: 100px;text-align: center;color: #f0f0f0;}/* 鼠标悬停时向右移动 */.box.bh:hover {transform: translateX(200px);}/* 鼠标悬停时向下移动 */.box.bv:hover {transform: translateY(200px);}/* 向右下角移动 */.box.move-diag:hover {transform: translate(200px, 200px);}</style>
</head><body><div class="box bh">悬停左右</div><div class="box bv">悬停上下</div><div class="box move-diag">悬停右下</div>
</body></html>
2、scale缩放
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>scale 缩放案例</title><style>body {display: flex; /* 设置为弹性布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 设置高度为视口高度 */}.box {width: 120px;height: 120px;background: #ff9800;border-radius: 16px;margin: 60px auto;color: #fff;font-size: 20px;text-align: center;line-height: 120px;transition: transform 0.4s; /* 设置过渡效果 */box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);}/* 设置悬停时的缩放效果 */.box.big:hover {transform: scale(2.5);}.box.small:hover {transform: scale(0.5);}</style>
</head><body><div class="box big">悬停放大</div><div class="box small">悬停缩小</div></body></html>
3、rotate旋转
rotate(a) :参数a取正值时元素相对原来中心顺时针旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rotate 旋转案例</title><style>img:hover {transform: rotate(360deg);transition: transform 1s;}</style>
</head>
<body><div>悬停旋转360度</div><img src="imgs/cat.png" alt="" width="500" height="500">
</body>
</html>
4、skew 倾斜
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>skew 倾斜案例</title><style>.skew-box {width: 300px;height: 120px;background: #b6ca6e;color: #fff;font-size: 28px;font-weight: bold;display: flex;align-items: center;justify-content: center;margin: 80px auto;border-radius: 16px;transition: transform 0.5s;box-shadow: inset 8px 16px 16px rgba(0,0,0,0.15);}.skew-box:hover {transform: skew(25deg, 15deg);}</style>
</head>
<body><div class="skew-box">悬停倾斜</div>
</body>
</html>
综合案例:
1.制作旋转按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>制作旋转按钮</title><style>.btn-list {display: flex; /* 使用flex布局 */gap: 60px; /* 按钮之间的间距 */margin: 40px 0px;}.btn-link {display: flex;flex-direction: column;align-items: center;text-decoration: none;color: #222;font-size: 20px;font-weight: bold;transition: color 0.3s; /* 文字颜色的过渡时间 */}.btn-link img {width: 48px;height: 48px;transition: transform 0.6s; /* 旋转和缩放的过渡时间 */display: block; /* 使图片独占一行 */margin-bottom: 8px;}/* 设置图片旋转360度,放大1.5倍*/.btn-link:hover img {transform: rotate(360deg) scale(1.5);}.btn-link:hover {color: #009fe8;}</style>
</head>
<body><h1 style="color:#009fe8;font-size:40px;font-weight:bold;">制作旋转按钮</h1><div class="btn-list"><a href="#" class="btn-link"><img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f4a1.png" alt="灯泡">灯泡</a><a href="#" class="btn-link"><img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f680.png" alt="火箭">火箭</a><a href="#" class="btn-link"><img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" alt="火焰">火焰</a></div>
</body>
</html>
2. 3D卡片翻转特效
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>3D卡片翻转特效</title><style>body {background: #f4f4f4;display: flex; /* 设置为弹性布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 设置高度为视口高度 */}.card-container {perspective: 1000px; /* 设置透视效果 */}.card {width: 300px;height: 200px;position: relative;transform-style: preserve-3d;transition: transform 0.7s cubic-bezier(.23,1.02,.64,.98); /* 过渡效果 */cursor: pointer;}.card-container:hover .card {transform: rotateY(180deg);}.card-face {position: absolute;width: 100%;height: 100%;left: 0;top: 0;backface-visibility: hidden; /* 隐藏背面 */border-radius: 16px;box-shadow: 0 8px 32px rgba(0,0,0,0.18);display: flex;align-items: center;justify-content: center;font-size: 28px;font-weight: bold;}/* 正面和背面的样式 */.card-front {background: linear-gradient(135deg, #009fe8 60%, #fff 100%);color: #fff;}.card-back {background: linear-gradient(135deg, #ff9800 60%, #fff 100%);color: #fff;transform: rotateY(180deg); /* 翻转背面 */}</style>
</head>
<body><div class="card-container"><div class="card"><div class="card-face card-front">正面内容</div><div class="card-face card-back">背面内容</div></div></div>
</body>
</html>
相关文章:
CSS3 变形
一、CSS3变形(Transform)是一些效果的集合,有以下几种: 平移(Translate):元素沿水平或垂直方向移动。旋转(Rotate):元素绕某点旋转一定的角度。缩放…...
【python基础知识】Day26 函数
一、函数的定义 函数是一段具有特定功能的、可重用的语句组,用函数名来表示。在需要使用函数时,通过函数名进行调用。函数也可以看作一段具有名字的子程序,可以在需要使用它的地方进行调用执行,不需要在每个执行的地方重复编写这些…...
C#中Action的用法
Action 是 C# 中委托的一种,用于封装无返回值的方法。它引用的方法不能有返回值,但可以有零个或多个参数。相比delegate委托,Action 委托的优点是不必显式定义封装无参数过程的委托,使代码更加简洁和易读。 1、delegate-委托 先…...
IOS CSS3 right transformX 动画卡顿 回弹
卡片从右往左滑动,在同时变换 width height right transformX的时候 在某些IPhone机型上 会有卡顿,在Chrome和Android等很多机型都是OK的,包括我的iphone 14 pro max. IOS 18.2 也是好的。但是,新的iPhone16 也会卡,会…...
ruskal 最小生成树算法
https://www.lanqiao.cn/problems/17138/learning/ 并查集ruskal 最小生成树算法 Kruskal 算法是一种用于在加权无向连通图中寻找最小生成树(MST)的经典算法。其核心思想是基于贪心策略,通过按边权从小到大排序并逐步选择边,确保…...
多系统环境下,如何构建高效的主数据管理体系?
企业信息化建设步伐不断加快,各类业务系统如雨后春笋般涌现,如ERP、CRM、SCM、MES等等。然而,系统繁多也带来了一个棘手的问题:数据孤岛。各系统间数据标准不一、信息不流通、口径不统一,导致企业主数据(如…...
Linux515 rsync定时备份
凌晨1时三分进行备份 源码 code: code指定文件夹定时备份rsync到备份机指定文件夹 一.环境配置(code,backup) 1.关闭防火墙 设置selinux相关为0 setenforce 0 /etc/selinux/config SELINUXdisable 分别配置 2.设置主机名 3.配置ip地址(…...
Claude官方63组提示词模板全解析:从工作到生活的AI应用指南
在当今AI技术飞速发展的时代,大模型如ChatGPT、Claude等已成为我们工作和生活中不可或缺的助手。然而,许多用户发现同样的AI工具在不同人手中能产生截然不同的效果——关键在于提示词(Prompt)的质量。 提示词是与AI沟通的桥梁,好的提示词能…...
C#中的typeof操作符与Type类型:揭秘.NET反射的基础
引言 在C#编程中,反射(Reflection)是一种强大的机制,它允许我们在运行时检查和操作类型、方法、属性等程序元素。而这种反射能力的核心就是typeof操作符和System.Type类。当我们希望动态加载程序集、创建对象实例、调用方法&…...
鸿蒙OSUniApp 实现的表单验证与提交功能#三方框架 #Uniapp
UniApp 实现的表单验证与提交功能 前言 在移动端应用开发中,表单是用户与应用交互的重要媒介。一个好的表单不仅布局合理、使用方便,还应该具备完善的验证与提交功能,以确保用户输入的数据准确无误。本文将分享如何在 UniApp 中实现表单验证…...
开源的跨语言GUI元素理解8B大模型:AgentCPM-GUI
一、模型概述 AgentCPM-GUI 是由清华大学自然语言处理实验室 (THUNLP) 和 ModelBest 联合开发的开源大模型。该模型基于 MiniCPM-V 架构,拥有 80 亿参数规模,是一个能够直接在终端设备上运行的轻量化智能体。它创新性地将多模态输入与 GUI 操作相结合&a…...
Function Calling
在介绍Function Calling之前我们先了解一个概念,接口。 接口 两种常见接口: 人机交互接口,User Interface,简称 UI应用程序编程接口,Application Programming Interface,简称 API接口能「通」的关键,是两边都要遵守约定。 人要按照 UI 的设计来操作。UI 的设计要符合人…...
星巴克中国要卖在高点
9%能否救70%的急? 作者|古廿 编辑|文昌龙 星巴克中国刚刚回暖,总部出售的计划再次提上日程。 5月15日,外媒又适时放出消息:星巴克将开始出售其在中国的股份。消息人士称,星巴克本周通过一位财务顾问向几位潜在投资…...
Docker实现MySQL数据库主从复制
一、拉取数据库镜像 docker pull mysql:5.7二、创建两个数据库(一主一从模式) mysql01(主) 1.docker run -d -p 3310:3306 -v /root/mysql/node-1/init:/docker-entrypoinit-initdb.d -v /root/mysql/node-1/config:/etc/mysql/conf.d -v /root/mysq…...
【物联网】基于树莓派的物联网开发【4】——WIFI+SSH远程登录树莓派
使用背景 没有有线网络,无屏幕如何远程登录?程序猫教大家如何通过电脑wifi热点的方式连接树莓派,ssh连接访问树莓派,包括putty开源远程工具进行连接,VNC远程桌面显示。 注:新手建议买一个树莓派配置的显示…...
CentOS7 OpenSSL升级1.1.1w
1.安装依赖 # openssl-3.4.0需要perl-IPC-Cmd perl-Data-Dumper yum -y install gcc* yum -y install perl-IPC-Cmd perl-Data-Dumper 2.备份、卸载旧OpenSSL 查找安装目录并备份 # whereis openssl openssl: /usr/bin/openssl /usr/lib64/openssl /usr/share/man/man1/op…...
高精度降压稳压技术在现代工业自动化中的应用
一、引言 在现代工业自动化的浪潮中,电源管理技术犹如隐藏在精密机械背后的智囊,虽不直接参与生产流程的逻辑决策,却是保障各类自动化设备稳定、高效运行的基石。高精度降压稳压技术,作为电源管理领域的核心分支,聚焦…...
鸿蒙OSUniApp制作动态筛选功能的列表组件(鸿蒙系统适配版)#三方框架 #Uniapp
使用UniApp制作动态筛选功能的列表组件(鸿蒙系统适配版) 前言 随着移动应用的普及,用户对应用内容检索和筛选的需求也越来越高。在开发跨平台应用时,动态筛选功能已成为提升用户体验的重要组成部分。本文将详细介绍如何使用UniA…...
Qt中控件的Viewport作用
在Qt中,viewport是控件中用于显示内容的一个概念区域,它在可滚动控件中尤为重要。以下是viewport的主要作用和特点: 主要作用 内容显示区域:viewport定义了控件中实际可见的部分,所有内容都在这个区域内显示。 滚动机…...
论文学习_Precise and Accurate Patch Presence Test for Binaries
摘要:打补丁是应对软件漏洞的主要手段,及时将补丁应用到所有受影响的软件上至关重要,然而这一点在实际中常常难以做到,研究背景。因此,准确检测安全补丁是否已被集成进软件发行版本的能力,对于防御者和攻击…...
ubuntu服务器版启动卡在start job is running for wait for...to be Configured
目录 前言 一、原因分析 二、解决方法 总结 前言 当 Ubuntu 服务器启动时,系统会显示类似 “start job is running for wait for Network to be Configured” 或 “start job is running for wait for Plymouth Boot Screen Service” 等提示信息,并且…...
国产数据库工具突围:SQLynx如何解决Navicat的三大痛点?深度体验报告
引言:Navicat的"中国困境" 当开发者面对达梦数据库的存储过程调试,或是在人大金仓中处理复杂查询时,Navicat突然变得力不从心——这不是个例。 真实痛点:某政务系统迁移至OceanBase后,开发团队发现Navicat无…...
牛客网NC21994:分钟计算
牛客网NC21994:分钟计算 📝 题目描述 输入格式 输入两行,每行包含两个整数,分别表示小时和分钟第一行表示起始时间,第二行表示结束时间 输出格式 输出一个整数,表示两个时间点之间的分钟数 示例 输入…...
全球宠物经济新周期下的亚马逊跨境采购策略革新——宠物用品赛道成本优化三维路径
在全球"孤独经济"与"银发经济"双轮驱动下,宠物用品市场正经历结构性增长。Euromonitor数据显示,2023年全球市场规模突破1520亿美元,其中中国供应链贡献度达38%,跨境电商出口增速连续三年超25%。在亚马逊流量红…...
Tomcat多应用部署与静态资源路径问题全解指南
🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,高级开发工程师,数学专业,10年以上C/C, C#, Java等多种编程语言开发经验,拥有高级工程师证书;擅长C/C、C#等开发语言,熟悉Java常用开…...
128.在 Vue 3 中使用 OpenLayers 实现绘制矩形截图并保存地图区域
📌 本文将介绍如何在 Vue 3 中使用 OpenLayers 实现: 1)用户可在地图上绘制矩形; 2)自动截取该区域地图为图片; 3)一键保存为本地 PNG 图片。 ✨效果如下图所示 🧠一、前言 在地图类…...
使用 163 邮箱实现 Spring Boot 邮箱验证码登录
使用 163 邮箱实现 Spring Boot 邮箱验证码登录 本文将详细介绍如何使用网易 163 邮箱作为 SMTP 邮件服务器,实现 Spring Boot 项目中的邮件验证码发送功能,并解决常见配置报错问题。 一、为什么需要邮箱授权码? 出于安全考虑,大…...
python处理异常,JSON
异常处理 #异常处理 # 在连接MySQL数据库的过程中,如果不能有效地处理异常,则异常信息过于复杂,对用户不友好,暴露过多的敏感信息 # 所以,在真实的生产环境中, 程序必须有效地处理和控制异常,按…...
原生微信小程序 textarea组件placeholder无法换行的问题解决办法
【问题描述】 微信小程序原生代码,使用文本域,placeholder使用\n 没有效果,网上找了一堆方案说使用 也没有效果 最后在一个前端大佬博客,找到解决办法,CSS设置word-wrap: break-word; white-space: pre-line; 【解决办…...
毕设设计 | 管理系统图例
文章目录 环素1. 登录、注册2. 菜单管理 环素 1. 登录、注册 2. 菜单管理 公告通知 订单管理 会员管理 奖品管理 新增、编辑模块...
激光雷达视觉定位是3D视觉定位吗?
激光雷达视觉定位通常被归类为3D视觉定位,但具体来说,它是融合了激光雷达(LiDAR)数据和视觉(图像)数据的多模态3D定位方法。我们可以从几个角度来理解这点: 为什么说它属于3D视觉定位ÿ…...
每周靶点:NY-ESO-1、GPC3、IL27分享
本期精选了《自身免疫性癌抗原NY-ESO-1》《肝细胞癌标记物GPC3》《白细胞介素IL27》三篇文章。以下为各研究内容的概述: 自身免疫性癌抗原NY-ESO-1 NY-ESO-1是一种自身免疫性癌抗原,也称为CTA1B(CTAG1B),由主要组织相…...
Maven 插件参数注入与Mojo开发详解
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
Java详解RabbitMQ工作模式之发布订阅模式
目录 一、发布订阅模式简介二、发布订阅模式的工作原理2.1 核心组件2.2 工作流程 三、代码示例3.1 生产者代码3.2 消费者代码 四、实际应用场景五、注意事项六、总结 在分布式系统中,消息队列作为异步通信的桥梁,扮演着至关重要的角色。而 RabbitMQ&…...
UR5e机器人Matlab仿真
在 MATLAB 中使用 UR5e 机器人模型进行仿真和控制,通常需要结合机器人系统工具箱(Robotics System Toolbox) UR5e loadrobot("universalUR5e","DataFormat","column"); UR5e.Gravity [0 0 -9.81]; % 保存机器…...
[ctfshow web入门] web75
信息收集 scandir被禁用了 解题 cforeach(new DirectoryIterator("glob:///*") as $a){echo($a->__toString(). ); } ob_flush();cif ( $a opendir("glob:///*") ) {while ( ($file readdir($a)) ! false ) {echo $file."<br>";}c…...
论文中表格跨页该怎么整(如何给跨页表格添加标题和表头)
标题:光标移动到第一行表格,然后快捷键;ctrl shirft enter,就会发现第二页多了一行,再把标题复制张贴过来即可 表头: 光标移动到第一行表格,鼠标右键 选择插入 再选择在上方插入行,然后手动添加…...
day26 Python 自定义函数
目录 一、函数的基本定义 示例 1:不带参数的函数 示例 2:查看文档字符串 二、带参数的函数 示例 3:带一个参数的函数 示例 4:带多个参数的函数 三、带返回值的函数 示例 5:计算两个数的和并返回结果 示例 6&am…...
洛谷P4907题解
题目传送门 题意: 扑克牌的部分牌被移除,需从剩牌中选 4 个区间,每个区间的牌都是同一花色且点数连续。如果不可选,输出最少需添加几张牌才能满足要求。 思路: 暴力和剪枝。 暴力:按照题意模拟ÿ…...
【MyBatis插件】PageHelper 分页
前言 在开发 Web 应用时,我们经常需要处理海量数据的展示问题。例如,在一个电商平台上,商品列表可能有成千上万条数据。如果我们一次性将所有数据返回给前端,不仅会导致页面加载缓慢,还会对数据库造成巨大压力。为了解…...
AI数字人融合VR全景:从技术突破到可信场景落地
摘要 本文深度解析AI数字人与VR全景技术融合的技术架构,结合故宫博物院、西门子、强生等真实行业案例,揭示技术落地的关键路径与量化价值。通过具体技术参数、实施细节及权威机构数据,构建可信的技术应用图景,为开发者提供可复用…...
机器学习——朴素贝叶斯练习题
一、 使用鸢尾花数据训练多项式朴素贝叶斯模型,并评估模型 代码展示: from sklearn.datasets import load_iris from sklearn.metrics import accuracy_score from sklearn.model_selection import train_test_split from sklearn.naive_bayes impor…...
【爬虫】DrissionPage-3
安装:4.1最新版本 pip install drissionpage --upgrade 官方文档:🛰️ 连接浏览器 | DrissionPage官网 1 Chromium对象 Chromium对象用于连接和管理浏览器。标签页的开关和获取、整体运行参数配置、浏览器信息获取等都由它进行。 1.1 默认…...
网络爬虫学习之httpx的使用
开篇 本文整理自《Python3 网络爬虫实战》,主要是httpx的使用。 笔记整理 使用urllib库requests库的使用,已经可以爬取绝大多数网站的数据,但对于某些网站依然无能为力。 这是因为这些网站强制使用HTTP/2.0协议访问,这时urllib和r…...
TASK02【Datawhale 组队学习】使用 LLM API 开发应用
文章目录 system prompt 和 user prompt高效prompt:用清晰、详尽的语言表达 Prompt原则一:清晰,具体的指令分隔符寻求结构化的输出要求模型检查是否满足条件提供少量示例 "Few-shot" prompting 原则二,给模型时间去思考…...
黑马k8s(七)
1.Pod介绍 查看版本: 查看类型,这里加s跟不加s没啥区别,可加可不加 2.Pod基本配置 3.镜像拉去策略 本地没有这个镜像,策略是Never,启动失败 查看拉去策略: 更改拉去策略: 4.启动命令 运行的是nginx、busv…...
【FMC216】基于 VITA57.1 的 2 路 TLK2711 发送、2 路 TLK2711 接收 FMC 子卡模块
产品概述 FMC216 是一款基于 VITA57.1 标准规范的 2 路 TLK2711 接收、2 路 TLK2711 发送 FMC 子卡模块。该板卡支持 2 路 TLK2711 数据的收发,支持线速率 1.6Gbps,经过 TLK2711 高速串行收发器,可以将 1.6Gbps 的高速串行数据解串为 16 位并…...
如何在Edge浏览器里-安装梦精灵AI提示词管理工具
方案一(应用中心安装-推荐): 梦精灵 跨平台AI提示词管理工具 - Microsoft Edge AddonsMake Microsoft Edge your own with extensions that help you personalize the browser and be more productive.https://microsoftedge.microsoft.com…...
Ubuntu shell指定conda的python环境启动脚本
Ubuntu shell指定conda的python环境启动脚本。 通过指令,获取目前系统的conda虚拟python环境 conda info -e 如下图所示,为我自己电脑的python环境 # conda environments: # base * /home/ubuntu/miniconda3 kitti …...
深入理解无监督学习与K-means聚类算法:原理与实践
一、无监督学习概述 无监督学习(Unsupervised Learning)是机器学习的重要分支之一,与有监督学习不同,它不需要预先标记的训练数据。在无监督学习中,计算机仅根据样本的特征或样本间的相关性,从数据中自动发现隐藏的模式或结构。 …...