前端基础知识学习总结-字体图标、平面转换

#博学谷IT学习技术支持#

一、字体图标

1、 字体图标 展示的是图标，本质是字体。 处理简单的、颜色单一的图片。

2、字体图标的优点：

 灵活性：灵活地修改样式，例如：尺寸、颜色等

 轻量级：体积小、渲染快、降低服务器请求次数

 兼容性：几乎兼容所有主流浏览器

 使用方便：

        1. 下载字体包

        2. 使用字体图标

3、 图标库 ：  Iconfont： https://www.iconfont.cn/

4、 下载字体 包：登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

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

6、 上传矢量图： 当 图标库没有项目所需的图标时 ：IconFont网站上传矢量图生成字体图标: 1. 与设计师沟通，得到SVG矢量图; 2. IconFont网站上传图标，下载使用

二、平面转换

1、平面转换作用： 使用transform属性实现元素的位移、旋转、缩放等效果

2、平面转换属性 ： transform

3、使用translate实现元素位移效果 ：语法 ：transform: translate(水平移动距离, 垂直移动距离);

       取值（正负均可）：像素单位数值 ，百分比（参照物为盒子自身尺寸）；注意：X轴正向为右，Y轴正向为下

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

4、使用translate快速实现绝对定位的元素居中效果：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

5、旋转：使用rotate实现元素旋转效果

    语法： transform: rotate(角度);

    注意：角度单位是deg

    技巧：取值正负均可： 取值为正, 则顺时针旋转 ，取值为负, 则逆时针旋转

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

语法：

     默认圆点是盒子中心点

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

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