【CSS3】字体图标、平面/空间转换、渐变、动画

一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果
注意点：
1、字体图标展示的是图标，本质是字体
2、处理简单的、颜色单一的图片
优点：
1、灵活性：灵活地修改样式，如：尺寸、颜色等
2、轻量级：体积小、渲染快、降低服务器请求次数
3、兼容性：几乎兼容所有主流浏览器
4、使用方便：
（1）下载字体包（2）使用字体图标
字体库： Iconfont:https://www.iconfont.cn
网站使用步骤：
1、打开官方图标库
2、将选择的图标添加购物车并添加到项目中
3、下载到本地

1.1 使用字体图标

1、引入字体图标样式表

   <link rel="stylesheet" href="./iconfont.css">

2、调用图标对应的类名，必须调用两个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx:图标对应的类名
例：

	<span class="iconfont icon-icon-test3"></span>

注意点：若网站没有所需字体图标时，可手动在iconfont网站上传矢量图再进行下载
——矢量图为SVG格式

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

2.1 位移

代码：

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

取值（正负均可）：
· 数字+px
· 百分比（参照物为盒子自身尺寸）
注意点：
1、translate()如果只给出一个值，表示x轴方向移动距离
2、单独设置某个方向的移动距离：translateX()和translateY()

2.2 旋转

代码：transform:rotate(角度);（注意：角度单位是deg）
取值（正负均可）：正—顺时针，负—逆时针
注意点：旋转效果必须配合过渡

2.3 补充

2.3.1 转换原点

目标：使用transform-orgin属性改变转换原点
代码：transform-orgin:原点水平位置 原点垂直位置；
取值：
1、方位名词（left、top、right、bottom、c