一、字体图标

iconfont——Unicode编码

1. 引入样式表：iconfont.css
2. 复制粘贴图标对应的Unicode编码
3. 设置文字字体 font-family ：‘iconfont’；

iconfont——font class

1. 引入字体图标样式表
2. 调用图标对应的类名，必须调用2个类名

• iconfont类：基本样式，包含字体的使用等
• icon-xxx：图标对应的类名

二、平面转换 （transfrom系列）

位移 ：

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

注意：X轴正向为右，Y轴正向为下

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转：

transform: rotate(角度); 单位角度是deg

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

缩放：

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

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

原点转换：

transform-origin ：原点水平位置 原点垂直位置;

默认圆点是盒子中心点

取值：

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

复合属性：

transfrom：translate（） rotate（）；

旋转会改变网页元素的坐标轴向，最后再写旋转

三、渐变

background-image ：linear-gradient(transparent,#000) ;

今日tips ：

1. transform是可以增大层级的，对行内元素不起效果
2. 原点需要在hover之前设置好
3. 平移和旋转一起使用要先写平移再写旋转，因为旋转会改变坐标轴的方向
4. 缩放中，scale设置一个值，控制宽度缩放，高度等比例缩放
5. 注意transfrom的层叠问题！（hover的时候）给hover设置transition的话会有来无回