****一.字体图标

1.字体图标的优点：

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

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

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

➢ 使用方便. 代码写法

里面必须有两个类名 内容

伪元素: centent'***';

二.平面转换

平移

• 使用transform属性实现元素的位移 旋转 缩放等效果.
• transform:translate(水平移动距离,垂直移动距离);
• 取值:X轴正向为右，Y轴正向为下
• 单独改变位置 可以单独设置transfrom:translateX或者translateY

旋转

• transfrom:rotate(角度deg);
• 顺时针为正 逆时针为负

转换原点

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

取值

➢ 方位名词（left、top、right、bottom、center）

➢ 像素单位数值

➢ 百分比（参照盒子自身尺寸计算）

**- translate居中 **

缩放

• transform:scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小
• 透明度（opacity）取值'1'是显示 取值'0'是隐藏

三.渐变****

• 渐变属性:background-image

• 可以设置渐变方向