字体图标
[iconfont-阿里巴巴矢量图标库]https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
下载字体包：
登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
Unicode编码.png
设置文字字体
文字字体.png
调用图标对应的类名，必须调用2个类名
iconfont第二种使用方式(常用).png
上传矢量图：
上传 → 上传SVG图标 → 浏览本地图标 → 去除颜色提交 → 加入购物车 → 下载使用
平面转换
水平垂直位移
语法：
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）：
像素单位数值;
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
绝对定位居中
核心代码
绝对定位居中.png
原理
位移取值为百分比数值，参照盒子自身尺寸计算移动距离
旋转
语法
transform: rotate(角度);
! 角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
多重转换
多重转换技巧
多重转换.png
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放
语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
渐变
渐变背景
语法
渐变.png
transparent-透明
渐变.png
