字体图标 节省服务器的响应压力 精灵图
优点：将多个图存放一个文件上，所以请求只有一次
缺点
它是一个图片，放大会失真
如果需要修改会比较麻烦
字体图标
优点
它是文本内容，矢量图，放大不会失真
它是文本，所以可以按文本样式进行设置
下载过程
百度搜索iconfont-- 可以选择图标 -- 添加入库 -- 点击购物车 -- 添加至项目 -- 下载
没有项目就默认创建一个noname项目
建议自己创建
阿里巴巴
[https://www.iconfont.cn/](url)
icomoon
[https://icomoon.io/](url)
使用 类名使用法 阿里巴巴
、 1.用link标签引入iconfont.css文件；
2.用i标签承接字体图标，<i class="iconfont icon-xxx"></i>
调用两个样式
指定字体
指定图标
icomoon
只需要调用一个样式
字体图标优势：
1.本质是文字，任意的放大或者缩小不会失真；
2.轻量级，降低服务器压力；
3.简洁的小图标就会用字体图标
在线图标库
将图标添加到项目，项目会有一个对应的地址
好处
不用将图标的资源文件下载到本地，减少本地项目的体积，为以后的项目上线打包做准备
如果添加新的图标，不用再重新下载覆盖
平面转换 平面
二维页面，只有X和Y轴
坐标
向右 === X轴正方向
向下 === Y轴正方向
平移
transform:translate(X轴偏移量，Y轴偏移量)
取值：可以正负
- 1.具体的像素单位；
- 2.百分比(参照盒子自身尺寸)
transform:translateX();
transform:translateY();
如果translate(只有一个值) === translateX()
旋转
transform:rotate(角度deg)
一定要添加deg,否则没有效果
取值：
- 1.正值：顺时针旋转；
- 2.负值：逆时针旋转；
左手法则
用左手，大拇指垂直面对你，手指环绕方向就是正方向
只能围绕Z轴旋转
细节：先做其它的变换再进行旋转
旋转会改变当前元素的坐标轴的方向
缩放
transform:scale(倍数)
transform:scale(X倍数，Y倍数)
取值：
- 1.大于1放大；
- 2.小于1缩小 注意点：行内元素所有的平面转换是没有效果的 渐变
background-image:linear-gredient([方向],参数1,参数2,参数3.....)
线性渐变：从一个方向到另外一个方向
参数是指颜色
取值：
1.参数1：方位
a.方位名词：to right，to left bottom；
b.角度deg，就不用再加to，直接设置角度
2.后面都是颜色值
