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

HTML、CSS学习笔记3（平面转换：位移、旋转、缩放，渐变）

news 2026/2/7 23:02:23

1.平面转换

使用 transform 属性实现元素的位移、旋转、缩放等效果

  • 2D转换

    • 2D转换是改变标签在二维平面上的位置和形状

    • 移动：translate

    • 旋转：rotate

    • 缩放：scale

1.1位移translate

  • translate语法

    • x就是X轴上水平移动，正向为右

    • y就是y轴上水平移动，正向为下

    • 单独设置某个方向的移动距离：translateX()  &  translateY()

  transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)  

  • 重点知识点

    • 取值，正负均可，像素单位

    • 百分比（是相对于本身的宽度和高度来进行计算的）

    • 2D的移动主要是指水平、垂直方向上的移动

    • translate最大的优点就是不影响其他元素的位置

    • 行内标签没有效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位移-基本使用</title><style>.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}.father:hover .son {/* 百分比（是相对于本身的宽度和高度来进行计算的） */transform: translate(100%, 50%);/* transform: translate(100px,50px); *//* 水平移动 100px *//* transform: translate(100px, 0) *//* 垂直移动 100px *//* transform: translate(0, 100px) *//* 水平移动 100px *//* transform: translateX(100px); *//* 垂直移动 100px */transform: translateY(100px);}</style>
</head><body><div class="father"><div class="son"></div></div>
</body></html>

（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材） 

让一个盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位元素居中效果</title><style>.father {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;/* margin-left: -100px;margin-top: -50px; *//* 用translate比较方便，适用于宽高不是整数值 */transform: translate(-50%,-50%);width: 203px;height: 100px;background-color: pink;          }</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材） 

案例：使用translate实现元素位移效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');overflow: hidden;overflow: hidden;}.box::before,.box::after {content: '';float: left;width: 50%;height: 600px;background: url(./images/fm.jpg);transition: all .5s;}.box::after {/* 取右边图 */background-position: right 0;}/* 鼠标移动的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translate(100%);}</style>
</head><body><div class="box"></div>
</body></html>

（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材） 

1.2 2D 转换之rotate旋转

  • rotate旋转

    • 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

/* 单位是：deg */
img:hover {transform: rotate(360deg)
}

  • rotate语法

    • rotate 里面跟度数，单位是 deg

    • 角度为正时，顺时针，角度为负时，逆时针

    • 默认旋转的中心点是元素的中心点

  • 设置元素旋转的中心的(transform-origin)--可改变转换的原点

    （D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材）

  transform-origin: x y;

  • 取值

  1. 方位名词（left、top、right、bottom、center）
  2. 像素单位数值
  3. 百分比（参照盒子自身尺寸计算）

  • 注意

    • 默认圆点是盒子中心点

    • 后面的参数 x 和 y 用空格隔开

    • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>转换原点</title><style>img {width: 250px;transition: all .5s;border: 1px solid #000;transform-origin: right bottom;}img:hover {transform: rotate(360deg);}</style>
</head>
<body><img src="./images/rotate.png" alt="">
</body>
</html>

 多重转换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多重转换</title><style>.box {width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 3s;}.box:hover img {/* 边走边转 *//* 正确走法 */transform: translate(600px) rotate(360deg);/* 错误，沿着旋转的路在水平走600px *//* 旋转会改变坐标轴方向 *//* transform: rotate(360deg) translate(600px); */}</style>
</head><body><div class="box"><img src="./images/tyre1.png" alt=""></div>
</body></html>

1.3 2D 转换之scale缩放

  • scale的作用：用来控制元素的放大与缩小

transform: scale(x, y)

  • 知识要点：

    • 注意，x（x轴缩放倍数）与y（y轴缩放倍数）之间用逗号进行分隔

    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

    • transform: scale(2, 2): 宽和高都放大了二倍

    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

    • transform:scale(0.5, 0.5): 缩小

    • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

   div:hover {/* 注意，数字是倍数的含义，所以不需要加单位 *//* transform: scale(2, 2) *//* 实现等比缩放，同时修改宽与高 *//* transform: scale(2) *//* 小于 1 就等于缩放*/transform: scale(0.5, 0.5)}

 

2D 转换综合写法以及顺序问题

知识要点

  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

  • 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

2.渐变

（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(2)\素材（渐变））

使用backgroung-image属性实现渐变背景效果

  • 渐变是多个颜色逐渐变化的视觉效果
  • 一般用于设置盒子的背景
background-image: linear-gradient(颜色1,颜色2
);

3.综合案例：

1.  D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.2.5作业\作业\03-华为新闻综合案例 

相关文章：

HTML、CSS学习笔记3（平面转换：位移、旋转、缩放，渐变）

1.平面转换 使用 transform 属性实现元素的位移、旋转、缩放等效果 2D转换 2D转换是改变标签在二维平面上的位置和形状 移动&#xff1a;translate 旋转&#xff1a;rotate 缩放&#xff1a;scale 1.1位移translate translate语法 x就是X轴上水平移动&#xff0c;正向为右…...

编程日记 2023/5/5 14:13:47

【C语言经典例题】打印菱形

目录 一、题目要求 二、解题思路 上半部分三角形 打印空格 打印星号* 下半部分三角形 打印空格 打印星号* 三、完整代码 代码 运行截图&#xff1a; 一、题目要求 输入一个整数n&#xff08;n为奇数&#xff09;&#xff0c;n为菱形的高&#xff0c;打印出该菱形 例&a…...

编程日记 2023/4/29 2:31:31

easyExcel与poi版本不兼容导致的后台报错问题

1、背景&#xff1a;最新接手公司系统excel导入解析模块&#xff0c;点击批量导入&#xff0c;后台报错如下 com.alibaba.excel.exception.ExcelAnalysisException: java.lang.NoClassDefFoundError: org/apache/poi/poifs/filesystem/FileMagicat com.alibaba.excel.analysis.…...

编程日记 2023/5/5 0:49:58

Fiddler报文分析-断点应用、模拟网络限速-HTTPS的 拦截

目录 一、报文分析 Statistics 请求性能数据 检查器&#xff08;Inspectors&#xff09; 自定义响应&#xff08;AutoResponder&#xff09; Composer Composer的功能就是用来创建HTTP Request然后发送请求。 允许自定义请求发送到服务器&#xff0c;即可以手动创建一个新…...

编程日记 2023/5/5 0:07:30

PHP基础（3）

PHP基础表单提交文件处理PHP连接数据库异常抛出表单提交 PHP通过全局变量 $_GET和 $_POST来收集表单数据。 接下来改用post方式进行提交&#xff0c;再次查看是否隐藏了提交的内容&#xff1a; 发现提交的信息已经不在链接之中进行显示了。 GET与POST区别在于一个会在连接…...

编程日记 2023/5/7 22:02:11

跳槽进字节跳动了，面试真的很简单

前言: 最近金三银四跳槽季&#xff0c;相信很多小伙伴都在面试找工作&#xff0c; 怎样才能拿到大厂的offer&#xff0c;没有掌握绝对的技术&#xff0c;那么就要不断的学习 如何拿下阿里等大厂的offer的呢&#xff0c;今天分享一个秘密武器&#xff0c;资深测试工程师整理的…...

编程日记 2023/5/4 11:29:58

【SpringBoot9】HandlerInterceptor拦截器的使用 ——防重复提交

看本篇博客前应当先看完前面三篇&#xff0c;这一篇是基于前面三篇的知识点的整合。所以很多重复的代码这里就不写出了 后台通过拦截器和redis实现防重复提交&#xff0c;避免因为网络原因导致多次请求同时进入业务系统&#xff0c;导致数据错乱&#xff0c;也可以防止对外暴露…...

编程日记 2023/5/5 14:13:24

内网渗透(五十八)之域控安全和跨域攻击-约束性委派攻击

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…...

编程日记 2023/5/4 11:31:09

Linux僵尸进程理解作业详解

1 下面有关孤儿进程和僵尸进程的描述&#xff0c;说法错误的是&#xff1f; A.孤儿进程&#xff1a;一个父进程退出&#xff0c;而它的一个或多个子进程还在运行&#xff0c;那么那些子进程将成为孤儿进程。 B.僵尸进程&#xff1a;一个进程使用fork创建子进程&#xff0c;如果…...

编程日记 2023/5/5 14:52:07

每日一题——L1-078 吉老师的回归（15）

L1-078 吉老师的回归 曾经在天梯赛大杀四方的吉老师决定回归天梯赛赛场啦&#xff01; 为了简化题目&#xff0c;我们不妨假设天梯赛的每道题目可以用一个不超过 500 的、只包括可打印符号的字符串描述出来&#xff0c;如&#xff1a;Problem A: Print "Hello world!&qu…...

编程日记 2023/5/10 2:55:15

ESP32设备驱动-DS1264数字温度传感器驱动

DS1264数字温度传感器驱动 1、DS1264介绍 DS1624 由两个独立的功能单元组成：一个 256 字节非易失性 E2 存储器和一个直接数字温度传感器。 非易失性存储器由 256 字节的 E2 存储器组成。 该存储器可用于存储用户希望的任何类型的信息。 这些内存位置通过 2 线串行总线访问。…...

编程日记 2023/4/28 14:44:18

8000+字，就说一个字Volatile

简介 volatile是Java提供的一种轻量级的同步机制。Java 语言包含两种内在的同步机制&#xff1a;同步块&#xff08;或方法&#xff09;和 volatile 变量&#xff0c;相比于synchronized&#xff08;synchronized通常称为重量级锁&#xff09;&#xff0c;volatile更轻量级&…...

编程日记 2023/5/2 14:02:24

MySQL的函数

Java知识点总结&#xff1a;想看的可以从这里进入 目录3.3、MySQL的函数3.3.1、字符串函数3.3.2、数学函数3.3.3、聚合函数3.3.4、日期函数3.3.5、条件判断函数3.3.6、系統信息函数3.3.7、其他函数3.3、MySQL的函数 MySQL提供了丰富的内置函数&#xff0c;这些函数使得数据的维…...

编程日记 2023/4/25 3:46:39

python排序算法

排序是指以特定格式排列数据。 排序算法指定按特定顺序排列数据的方式。 最常见的排序是数字或字典顺序。 排序的重要性在于&#xff0c;如果数据是以分类方式存储&#xff0c;数据搜索可以优化到非常高的水平。 排序也用于以更易读的格式表示数据。 下面来看看python中实现的5…...

编程日记 2023/5/7 16:41:52

【C++入门第二期】引用 和 内联函数 的使用方法及注意事项

前言引用的概念初识引用区分引用和取地址引用与对象的关系引用的特性引用的使用场景传值和引用性能比较引用和指针的区别内联函数内联函数的概念内联函数的特性前言 本文主要学习的是引用 及 内联含函数&#xff0c;其中的引用在实际使用中会异常舒适。 引用的概念 概念&…...

编程日记 2023/5/2 14:50:24

数据结构——顺序表讲解

作者&#xff1a;几冬雪来 时间&#xff1a;2023年2月25日 内容&#xff1a;数据结构顺序表内容讲解 目录 前言&#xff1a; 顺序表&#xff1a; 1.线性表&#xff1a; 2.什么是顺序表&#xff1a; 3.顺序表的概念和构成&#xff1a; 4.顺序表的书写&#xff1a; 1…...

编程日记 2023/5/7 3:33:29

Redis 主从复制-服务器搭建【薪火相传/哨兵模式】

Redis 安装参考文章&#xff1a;Centos7 安装并启动 Redis-6.2.6 注意&#xff1a;本篇文章操作&#xff0c;不能在 静态IP地址 下操作&#xff0c;必须是 动态IP地址&#xff0c;否则最后主从服务器配置不成功&#xff01; 管道符查看所有redis进程&#xff1a;ps -ef|grep re…...

编程日记 2023/5/6 18:59:40

数据库|（五）分组查询

&#xff08;五&#xff09;分组查询1. 介绍2. 语法3. 简单分组函数2. 添加筛选条件3. 添加复杂的筛选条件4. 分组查询特点5. 按表达式或函数分组6. 按多个字段分组7. 分组查询添加排序1. 介绍 引入&#xff1a;查询每个部门的平均工资 -- 以前写法&#xff1a;求的是总平均工…...

编程日记 2023/4/21 6:47:14

Orin安装ssh、vnc教程

文章目录一&#xff1a;ssh远程终端的配置PC的配置MobaXterm的下载二&#xff1a;VNC Viewer远程图形界面终端配置&#xff1a;PC配置&#xff1a;一&#xff1a;ssh远程 终端的配置 1.ifconfig查看终端ip地址 其中的eth是网口&#xff0c;我们需要看的是wlan0下的inet&#…...

编程日记 2023/4/30 23:24:57

Allegro如何快速删除孤立铜皮操作指导

Allegro如何快速删除孤立铜皮操作指导 在做PCB设计的时候，铺铜是常用的设计方式，在PCB设计完成之后，需要删除PCB上孤立的铜皮，即铜皮有网络但是却没有任何连接 如下图 通过Status报表也可以看到Isolated shapes 如何快速地删除孤立铜皮，具体操作如下 点击Shape...

编程日记 2023/5/9 10:56:25

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/1 3:20:34

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46