一、字体图标

1.Unicode编码：

2.– 类名：

l 引入字体图标样式表：调用图标对应的类名，必须调用2个类名为 iconfont类：基本样式，包含字体的使用 icon-xxx：图标对应的类名

3.矢量图：

IconFont网站上传矢量图生成字体图标 Ø 1. 与设计师沟通，得到SVG矢量图 Ø 2. IconFont网站上传图标，下载使用

二、平面转换

本质是 使用transform属性实现元素的位移、旋转、缩放等效果

1.位移

使用translate实现元素位移效果

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

l 取值（正负均可）

1.像素单位数值 2. 百分比（参照物为盒子自身尺寸）

注意：

X轴正向为右，Y轴正向为下

技巧

1. translate()如果只给出一个值, 表示x轴方向移动距离 2.单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

2.旋转

语法

1. transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

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

转换原点

使用transform-origin属性改变转换原点

取值

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

3.多重转换

使用transform复合属性实现多形态转换

4.缩放

使用scale改变元素的尺寸

三、渐变

1.渐变背景

使用background-image属性实现渐变背景效果