字体图标
下载字体图标(https://www.iconfont.cn/)
步骤：百度搜索iconfont--素材库或者搜索栏去搜索你想添加的字体图标--点击你想要添加的某个字体图标--然后添加到购物车--点击右上角的购物车--选择添加至项目(没有项目的要新建项目)--下载至本地，解压到电脑上，把解压的文件放在需要使用的文件夹的根目录
使用方法
1.unicode编码使用：
步骤：
1.引入下载好的字体图标文件夹的iconfont.css;
2.利用空标签(大部分是用i标签)去承接unicode编码内容; <i>unicode字体图标代码</i>
3.声明字体图标:font-family:iconfont;
2.font-class类名调用：
步骤：
1.引入下载好的字体图标文件夹的iconfont.css;
2.输入类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面 直接复制文字下方的类名即可;
3.在线引入字体图标：
步骤：
1.confont网站上传图标，浏览本地图标，去除颜色提交，加入购物车，下载使用
2.引入网站链接
3.i标签输入类名
平面转换(transform)
1.位移：
1.语法：transform: translate(水平移动距离, 垂直移动距离)
2.取值：（正负均可）
1.像素单位数值
2.百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
3技巧： translate()如果只给出一个值, 表示x轴方向移动距离，单独设置某个方向的移动距离：
translateX() & translateY()
Snipaste_2022-04-01_21-10-13.png
2.位移-绝对定位居中
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
Snipaste_2022-04-01_21-15-29.png
3.旋转（rotate）
语法:transform: rotate(角度)
技巧：取值正负均可,'取值为正, 则顺时针旋转' ，'取值为负, 则逆时针旋转'
Snipaste_2022-04-01_21-20-45.png
4.转换原点 （origin）
语法：默认圆点是盒子中心点，transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
image.png
5.多重转换
走到右侧并且旋转一周
transform: translate(600px) rotate(360edg);
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
image.png
6.缩放（scale）
语法：
transform: scale(x轴缩放倍数, y轴缩放倍数)
技巧：
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小 等于1相当于没有设置
image.png
7.渐变
背景颜色渐变
语法：background-image: linear-gradient(参数1, 参数2, 参数3, ....)
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
image.png
