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

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

news 文章来源：https://blog.csdn.net/m0_73809176/article/details/128756843 2025/4/25 22:45:35

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

从单管单色到单管RGB，这项MicroLED工艺不可忽视

微显示技术商Porotech&#xff0c;在CES 2023期间展示了最新的MicroLED显示模组。近期&#xff0c;AR/VR光学领域的知名博主Karl Guttag深度分析了该公司的微显示技术&#xff0c;并指出Porotech带来了他见过最有趣的MicroLED技术。Guttag表示&#xff1a;Porotech是本届CES上给…...

编程日记 2023/5/7 1:56:10

6-Java中新建一个文件、目录、路径

文章目录前言1-文件、目录、路径2-在当前路径下创建一个文件3-在当前路径下创建一个文件夹&#xff08;目录&#xff09;3.1 测试1-路径已经存在3.2 测试2-路径不存在3.2 创建不存在的路径并新建文件3.3 删除已存在的文件并新建4-总结前言 学习Java中如何新建文件、目录、路径…...

编程日记 2023/5/10 1:26:52

Bootstrap系列之Flex布局

文章目录Bootstrap中的Flexd-flex与d-inline-flex也存在响应式变化flex水平布局flex垂直布局flex水平与垂直也存在响应式变化内容排列&#xff08;justify-content响应式变化也存在于这里sm&#xff0c;md&#xff0c;lg&#xff0c;xl&#xff09;子元素对齐方式Align items&a…...

编程日记 2023/5/8 12:28:15

匈牙利算法与KM算法的区别

前记 在学习过程中&#xff0c;发现很多博客将匈牙利算法和KM算法混为一谈&#xff0c;当时只管用不管分析区别&#xff0c;所以现在来分析一下两个算法之间的区别。 匈牙利算法在二分图匹配的求解过程中共两个原则&#xff1a; 1.最大匹配数原则 2.先到先得原则 而KM算法求…...

编程日记 2023/5/8 22:03:37

You Only Need 90K Parameters to Adapt Light 论文阅读笔记

这是BMVC2022的论文&#xff0c;提出了一个轻量化的局部全局双支路的低光照图像质量增强网络&#xff0c;有监督。 思路是先用encoder f(⋅)f(\cdot)f(⋅)转到raw-RGB域&#xff0c;再用decoder gt(⋅)g_t(\cdot)gt​(⋅)模拟ISP过程转到sRGB域。虽然文章好像没有明确指出&…...

编程日记 2023/5/8 16:29:43

【vue2小知识】实现axios的二次封装

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;在vue2中实现axios的二次封装 目录 一、平常axios的请求发送方式 二、axios的一次封装…...

编程日记 2023/5/3 23:40:06

走近php的数组：数组的定义与数组函数

数组是一种数据结构&#xff0c;它由一组元素组成&#xff0c;这些元素可以是相同类型或不同类型。数组是在程序运行时动态创建的&#xff0c;可以根据需要增加或删除元素&#xff0c;因此它们是非常灵活和实用的数据结构。在大多数编程语言中&#xff0c;数组都有一个索引&…...

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

Docker 应用实践-仓库篇

目前 Docker 官方维护了一个公共仓库 Docker Hub&#xff0c;用于查找和与团队共享容器镜像&#xff0c;界上最大的容器镜像存储库&#xff0c;拥有一系列内容源&#xff0c;包括容器社区开发人员、开放源代码项目和独立软件供应商&#xff08;ISV&#xff09;在容器中构建和分…...

编程日记 2023/5/2 17:07:23

python+django篮球NBA周边商城vue

目 录 第一章 绪 论 1 1.1背景及意义 1 1.2国内外研究概况 1 1.3 研究的内容 1 第二章 关键技术的研究 3 2.1 vue技术介绍 3 myproject/ <-- 高级别的文件夹 |-- myproject/ <-- Django项目文件夹 | |-- myproje…...

编程日记 2023/5/5 8:40:47

抽象类与接口的区别

抽象类什么是抽象类&#xff1f;抽象类是特殊的类&#xff0c;只是不能被实例化&#xff1b;除此以外&#xff0c;具有类的其他特性&#xff1b;重要的是抽象类可以包括抽象方法&#xff0c;这是普通类所不能的。抽象方法只能声明于抽象类中&#xff0c;且不包含任何实现&#…...

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