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

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

news 2026/4/1 6:36:00

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

Enhancing LLM Reasoning with Knowledge Graphs: A Faithful and Interpretable Approach

1. 为什么需要知识图谱增强LLM推理 最近两年&#xff0c;大型语言模型&#xff08;LLM&#xff09;的表现确实让人惊艳。我测试过GPT-4在代码生成、文案创作等场景的表现&#xff0c;效果确实超出预期。但当我尝试用LLM做知识密集型任务时&#xff0c;比如回答"贾斯汀比伯…...

编程新知 2026/4/1 6:17:31

基于vue的错题管理系统[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;随着在线教育的发展&#xff0c;错题管理作为学习过程中的重要环节&#xff0c;其信息化管理需求日益增长。本文旨在设计并实现一个基于Vue框架的错题管理系统&#xff0c;通过对系统需求进行深入分析&#xff0c;采用合适的技术架构和开发技术&#xff0c;完成…...

编程新知 2026/4/1 6:15:25

Ubuntu 22.04 改IP重启失效？别急，可能是OVS的ovsdb-server在捣鬼

Ubuntu 22.04网络配置失效&#xff1a;当OVS与netplan的隐秘博弈 在虚拟化技术大行其道的今天&#xff0c;Open vSwitch&#xff08;OVS&#xff09;作为开源虚拟交换机的标杆&#xff0c;已经成为众多云计算平台和容器网络的核心组件。然而&#xff0c;当它遇上Ubuntu 22.04默…...

编程新知 2026/4/1 5:02:39

SGMICRO圣邦微 SGM8740YC5G/TR SC70-5 比较器

特性 快速&#xff0c;45纳秒传播延迟(10毫伏过驱动)低功耗:在Vs3V时为155pA(典型值) 宽电源电压范围:2.7V至5.5V优化适用于3V和5V应用轨到轨输入电压范围低偏置电压:0.9mV(典型值)内部迟滞以实现干净开关 输出摆幅:在4mA输出电流下&#xff0c;从轨距内.200mV范围内 与CMOS/TT…...

编程新知 2026/4/1 4:44:23

知乎上线求职工具，助力毕业生破困局

知乎上线求职利器&#xff0c;直击毕业生痛点2026届全国普通高校毕业生预计达1270万人&#xff0c;再创历史新高。与此同时&#xff0c;AI技术加速行业重构&#xff0c;部分传统岗位需求收缩&#xff0c;大量毕业生陷入“海投”困境&#xff0c;难以精准定位自身。在此背景下&a…...

编程新知 2026/4/1 4:09:45

LeetCode Hot 100 | 滑动窗口专题（C++ 题解）

LeetCode Hot 100 | 滑动窗口专题&#xff08;C 题解&#xff09; 滑动窗口是处理连续子数组/子字符串问题的核心技巧&#xff0c;通过维护一个可变窗口来避免重复计算&#xff0c;将 O(n) 的暴力枚举优化到 O(n)。本文涵盖 LeetCode Hot 100 中 2 道经典滑动窗口题目&#xff…...

编程新知 2026/4/1 4:07:44

BabyOS：MCU裸机开发的轻量级框架解析

1. BabyOS&#xff1a;专为MCU裸机开发设计的轻量级框架 在嵌入式开发领域&#xff0c;重复造轮子一直是困扰工程师的痛点。每次新项目启动&#xff0c;我们总需要重新调试那些基础功能模块——从串口通信到Flash操作&#xff0c;从定时器管理到协议栈实现。BabyOS的出现&#…...

编程新知 2026/4/1 3:14:55

Qwen3-TTS开源大模型实战：复古HUD界面下的AI语音创作工作流

Qwen3-TTS开源大模型实战&#xff1a;复古HUD界面下的AI语音创作工作流 1. 引言&#xff1a;当AI语音合成遇上复古游戏风 想象一下&#xff0c;你不再需要面对枯燥的音频参数调节界面&#xff0c;而是走进一个像素风的游戏世界。在这里&#xff0c;生成一段AI语音就像玩一款复…...

编程新知 2026/4/1 3:14:54

Python大麦网智能抢票脚本：三分钟搭建你的自动购票系统

Python大麦网智能抢票脚本&#xff1a;三分钟搭建你的自动购票系统 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 还在为抢不到心仪的演唱会门票而烦恼吗&#xff1f;每次开…...

编程新知 2026/4/1 1:53:48

nlp_structbert_sentence-similarity_chinese-large入门指南：从ModelScope下载到本地Web服务上线

nlp_structbert_sentence-similarity_chinese-large入门指南&#xff1a;从ModelScope下载到本地Web服务上线 你是不是经常需要判断两句话是不是一个意思&#xff1f;比如&#xff0c;检查用户提问是不是同一个问题&#xff0c;或者看看两段文案是不是在说同一件事。以前做这种…...

编程新知 2026/4/1 0:54:19