一、iconfont的引入方式
1.引入iconfont文件夹中的iconfont.css文件
2.通过i标签（绝大部分情况下都是使用 i 标签承接字体图标）把Unicode编码复制过来？
方法二、
1.引入iconfont.css文件
2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
方法三、
在线引入字体图标，要在链接前面添加 http:
平面转换（2D转换）
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面转换属性：（transform）
一、位移-的基本使用
位移属性：（translate）
目标：使用translate实现元素位移效果
鼠标移入到父盒子，改变盒子的位置（transform: translate）
（transform: translatex）从左到右为 x轴水平方向 向左移动为负数，向右移动为正数
（transform: translatey）从上到下为y轴垂直方向 向上移动为腹水 ，向下移动为正数
二、位移-绝对定位居中
![]()
居中图.png
核心代码：
原理：
位移取值为百分比数值，参照盒子自身尺寸计算移动距离
旋转
目标：使用rotate实现元素旋转效果
语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
转换原点
目标：使用transform-origin属性改变转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
多重转换
目标：使用transform复合属性实现多形态转换
多重转换技巧
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
注意点：旋转会改变坐标轴方向当平移与旋转一起使用的时候，要把平移放在旋转的前面
缩放
目标：使用scale改变元素的尺寸
思考: 改变元素的width或height属性能实现吗？
语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
缩放
目标：使用scale改变元素的尺寸
播放按钮
布局
::after
样式
居中 - 效果
缩放
透明度（opacity）
渐变
渐变背景
目标：使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
渐变背景
目标：使用background-image属性实现渐变背景效果
