字體圖標(biāo)

下載字體圖標(biāo)(https://www.iconfont.cn/)
步驟；百度搜索iconfont--素材庫或者搜索欄去搜索你想要添加的字體圖標(biāo)--點(diǎn)擊你想要添加的某個(gè)字體圖標(biāo)的購物車--點(diǎn)擊右上角的購物車--選擇添加至項(xiàng)目(沒有項(xiàng)目的要新建項(xiàng)目)--下載至本地，解壓出來，解壓的文件放在需要使用的文件夾的根目錄

unicode編碼的使用：

步驟：
1.引入下載好的字體圖標(biāo)文件夾的iconfont。css；
2.利用空標(biāo)簽（大部分使用i標(biāo)簽）去承接unicode編碼內(nèi)容；
3.聲明字體圖標(biāo)庫 font-family:icinfont

字體圖標(biāo)-unicode.png

font-class類名調(diào)用：

步驟：
1.引入下載好的字體圖標(biāo)文件夾的iconfont.css；
2.類名：
第一個(gè)類名是固定的：iconfont；
第二個(gè)類名：通過demo-index,html文件夾或者項(xiàng)目主頁面，直接復(fù)制文字下的代碼

字體圖標(biāo)-類名.png

平面轉(zhuǎn)換

位移基本使用

transform: translate(水平移動(dòng)距離, 垂直移動(dòng)距離);
取值：（正負(fù)均可）
像素單位數(shù)值 百分比
（參照物為盒子自身尺寸）
注意：X軸正向?yàn)橛?，Y軸正向?yàn)橄?br> 技巧：
translate()如果只給出一個(gè)值, 表示x軸方向移動(dòng)距離
單獨(dú)設(shè)置某個(gè)方向的移動(dòng)距離：translateX() & translateY()

平面轉(zhuǎn)換-位移.png

位移基本使用.png

位移絕對(duì)定位居中

位移取值為百分比數(shù)值，參照盒子自身尺寸計(jì)算移動(dòng)距離

位移-絕對(duì)定位.png

旋轉(zhuǎn)

語法
transform: rotate(角度);
注意：角度單位是deg
技巧：取值正負(fù)均可
取值為正, 則順時(shí)針旋轉(zhuǎn)
取值為負(fù), 則逆時(shí)針旋轉(zhuǎn)

轉(zhuǎn)換原點(diǎn)

語法
默認(rèn)圓點(diǎn)是盒子中心點(diǎn)
transform-origin: 原點(diǎn)水平位置 原點(diǎn)垂直位置;
l 取值
方位名詞（left、top、right、bottom、center）
像素單位數(shù)值
百分比（參照盒子自身尺寸計(jì)算）

平面轉(zhuǎn)換-轉(zhuǎn)換原點(diǎn).png

漸變

漸變背景

使用background-image屬性實(shí)現(xiàn)漸變背景效果
漸變是多個(gè)顏色逐漸變化的視覺效果
一般用于設(shè)置盒子的背景

背景顏色-漸變.png