字体图标

步骤：

1，登录网站（https://www.iconfont.cn/）注册
2，选择需要的字体图标添加至购物车
3，点击右上角的购物车图标
4，选择添加至项目（如果第一次添加需要先创建项目）

使用字体图标

步骤：

unicode使用法

1.引入iconfont文件夹中的iconfont.css文件
2.通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
3.声明字体图标库
如图：

unicode使用法.png

类名使用法

步骤：

1，第一个类名是固定的：iconfont;
2，第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

类使用法.png

平面转换

平移

语法： transform: translate(水平移动距离, 垂直移动距离);

取值：

  1，正负都可以  
  2，百分比模式（以自身尺寸为参照物）

注意点：

X轴正向为右，Y轴正向为下
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY(）

坐标轴图.png

旋转

语法：

transform: rotate(角度);
注意点：角度单位是deg

取值：

正负都可以
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

旋转实例.png

转换原点

语法

1，默认圆点是盒子中心点
2， transform-origin: 原点水平位置 原点垂直位置;

取值

1，方位名词（left、top、right、bottom、center）
2， 像素单位数值
3，百分比（参照盒子自身尺寸计算）

转换原点.png

缩放

语法

transform: scale(x轴缩放倍数, y轴缩放倍数);

注意点

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
scale值大于1表示放大, scale值小于1表示缩小

缩放实例.png

渐变

语法：使用background-image属性实现渐变背景效果
注意点：背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to

渐变语法.png

渐变实例.png