HTML、CSS学习笔记3（平面转换：位移、旋转、缩放，渐变）
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（平面转换：位移、旋转、缩放，渐变）相关推荐
- CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS学习笔记（详细）- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介 第一个网页 自结束标签和注释 文档声明 进制 字符编码 完整的文档结构 2021/9/30 VScode安装及使用 实体 meta ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
最新文章
- 【推荐】大型网站图片服务器架构的演进
- python与excel做数据可视化-python操作Excel、读取CVS与数据可视化
- 百度人脸搜索的一次尝试（JAVA）
- thymeleaf引入css js写法
- 2015年IT领域里Docker和其它颠覆性的趋势
- mysql xtrabackup 保护模式_MySQL Xtrabackup备份原理和实现细节
- audio 小程序 放大_小程序之争：支付宝、百度“放大招”，春节欲打突围战
- 经典参考书：《编程之美——微软技术面试心得》
- 双非院校，0项目经验，三个月入职大厂NLP算法岗，月薪30k+
- Boost Graph Library
- 自己动手写操作系统之1：bochs初步使用
- wps html编辑表格,WPS教你如何使用平板电脑创建和编辑表格批注
- 简述apache和php工作流程,php工作流程
- C#实现微信扫码支付
- MySQL8 设置远程访问授权
- 其他人的爱情 VS 程序员的爱情
- ubuntu 安装截图工具 Shutter，并设置快捷键 Ctrl+SuperL
- 优秀Android开发源码合集（附解析）程序员进阶宝典
- 恒容容器放气的瞬时流量的计算
- C#WPF选择文件和文件夹