一性誉、iconfont的引入方式
1.引入iconfont文件夾中的iconfont.css文件
2.通過i標(biāo)簽（絕大部分情況下都是使用 i 標(biāo)簽承接字體圖標(biāo)）把Unicode編碼復(fù)制過來疲恢？
方法二、
1.引入iconfont.css文件
2.通過標(biāo)簽承接字體圖標(biāo)
類名：
第一個(gè)類名是固定的：iconfont;
方法三、
在線引入字體圖標(biāo)，要在鏈接前面添加 http:
平面轉(zhuǎn)換（2D轉(zhuǎn)換）
目標(biāo)：使用transform屬性實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)弧烤、縮放等效果
平面轉(zhuǎn)換屬性：（transform）
一、位移-的基本使用
位移屬性：（translate）
目標(biāo)：使用translate實(shí)現(xiàn)元素位移效果
鼠標(biāo)移入到父盒子蹬敲，改變盒子的位置（transform: translate）
（transform: translatex）從左到右為 x軸水平方向 向左移動為負(fù)數(shù)暇昂，向右移動為正數(shù)
（transform: translatey）從上到下為y軸垂直方向 向上移動為腹水 ，向下移動為正數(shù)
二伴嗡、位移-絕對定位居中
![]()
居中圖.png
核心代碼：
原理：
位移取值為百分比數(shù)值急波，參照盒子自身尺寸計(jì)算移動距離
旋轉(zhuǎn)
目標(biāo)：使用rotate實(shí)現(xiàn)元素旋轉(zhuǎn)效果
語法
transform: rotate(角度);
注意：角度單位是deg
技巧：取值正負(fù)均可
取值為正, 則順時(shí)針旋轉(zhuǎn)
取值為負(fù), 則逆時(shí)針旋轉(zhuǎn)
轉(zhuǎn)換原點(diǎn)
目標(biāo)：使用transform-origin屬性改變轉(zhuǎn)換原點(diǎn)
語法
默認(rèn)圓點(diǎn)是盒子中心點(diǎn)
transform-origin: 原點(diǎn)水平位置 原點(diǎn)垂直位置;
取值
方位名詞（left、top瘪校、right澄暮、bottom、center）
像素單位數(shù)值
百分比（參照盒子自身尺寸計(jì)算）
多重轉(zhuǎn)換
目標(biāo)：使用transform復(fù)合屬性實(shí)現(xiàn)多形態(tài)轉(zhuǎn)換
多重轉(zhuǎn)換技巧
多重轉(zhuǎn)換原理
旋轉(zhuǎn)會改變網(wǎng)頁元素的坐標(biāo)軸向
先寫旋轉(zhuǎn)阱扬，則后面的轉(zhuǎn)換效果的軸向以旋轉(zhuǎn)后的軸向?yàn)闇?zhǔn)泣懊，會影響轉(zhuǎn)換結(jié)果
注意點(diǎn)：旋轉(zhuǎn)會改變坐標(biāo)軸方向當(dāng)平移與旋轉(zhuǎn)一起使用的時(shí)候，要把平移放在旋轉(zhuǎn)的前面
縮放
目標(biāo)：使用scale改變元素的尺寸
思考: 改變元素的width或height屬性能實(shí)現(xiàn)嗎麻惶？
語法
transform: scale(x軸縮放倍數(shù), y軸縮放倍數(shù));
技巧
一般情況下, 只為scale設(shè)置一個(gè)值, 表示x軸和y軸等比例縮放
transform: scale(縮放倍數(shù));
scale值大于1表示放大, scale值小于1表示縮小
縮放
目標(biāo)：使用scale改變元素的尺寸
播放按鈕
布局
::after
樣式
居中 - 效果
縮放
透明度（opacity）
漸變
漸變背景
目標(biāo)：使用background-image屬性實(shí)現(xiàn)漸變背景效果
漸變是多個(gè)顏色逐漸變化的視覺效果
漸變背景
目標(biāo)：使用background-image屬性實(shí)現(xiàn)漸變背景效果
