字体图标

[iconfont-阿里巴巴矢量图标库]https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

下载字体包：

登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

引入样式表：iconfont.css

复制粘贴图标对应的Unicode编码

Unicode编码.png

设置文字字体

文字字体.png

调用图标对应的类名，必须调用2个类名

iconfont第二种使用方式(常用).png

上传矢量图：

上传 → 上传SVG图标 → 浏览本地图标 → 去除颜色提交 → 加入购物车 → 下载使用

平面转换

水平垂直位移

语法：

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

取值（正负均可）：

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

技巧

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

绝对定位居中

核心代码

绝对定位居中.png

原理

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转

语法

transform: rotate(角度);
! 角度单位是deg

技巧：取值正负均可

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

转换原点

语法

默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;

取值

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

多重转换

多重转换技巧

多重转换.png

多重转换原理

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

语法

transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

渐变

渐变背景

语法

渐变.png

transparent-透明

渐变.png