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

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

news 2025/7/8 0:32:09

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;

取值

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

注意
- 默认圆点是盒子中心点
- 后面的参数 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转换是改变标签在二维平面上的位置和形状移动：translate 旋转：rotate 缩放：scale 1.1位移translate translate语法 x就是X轴上水平移动，正向为右…...

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

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

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

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

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

1、背景：最新接手公司系统excel导入解析模块，点击批量导入，后台报错如下 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 请求性能数据检查器（Inspectors） 自定义响应（AutoResponder） Composer Composer的功能就是用来创建HTTP Request然后发送请求。允许自定义请求发送到服务器，即可以手动创建一个新…...

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

PHP基础（3）

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

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

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

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

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

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

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

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

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

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

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

Linux僵尸进程理解作业详解

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

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

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

L1-078 吉老师的回归曾经在天梯赛大杀四方的吉老师决定回归天梯赛赛场啦！ 为了简化题目，我们不妨假设天梯赛的每道题目可以用一个不超过 500 的、只包括可打印符号的字符串描述出来，如：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 语言包含两种内在的同步机制：同步块（或方法）和 volatile 变量，相比于synchronized（synchronized通常称为重量级锁），volatile更轻量级&…...

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

MySQL的函数

Java知识点总结：想看的可以从这里进入目录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提供了丰富的内置函数，这些函数使得数据的维…...

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

python排序算法

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

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

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

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

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

数据结构——顺序表讲解

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

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

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

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

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

数据库|（五）分组查询

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

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

Orin安装ssh、vnc教程

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

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

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

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

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

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2025/7/7 17:37:24

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/7/6 2:54:59

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/7/5 18:36:22

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/7/6 11:27:02

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...

编程新知 2025/7/5 22:47:32

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...

编程新知 2025/7/7 9:55:14

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/7/6 23:48:10

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/7 3:01:07

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/7/6 15:15:08

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2025/7/7 15:00:41

1.平面转换

2D转换

1.1位移translate

translate语法

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

重点知识点

让一个盒子水平垂直居中

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

1.2 2D 转换之rotate旋转

rotate旋转

rotate语法

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

取值

注意

多重转换

1.3 2D 转换之scale缩放

知识要点：

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

2.渐变

3.综合案例：

相关文章：

`注意`

`知识要点：`