聲明：本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫，學(xué)員有權(quán)匿名，對(duì)文章有最終解釋權(quán)；凱哥學(xué)堂旨在促進(jìn)VIP學(xué)員互相學(xué)習(xí)的基礎(chǔ)上公開筆記。
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
其中rotate屬性是用來定義2D旋轉(zhuǎn)的，屬性參數(shù)里面填寫的是旋轉(zhuǎn)的角度。
圖片旋轉(zhuǎn)代碼示例：
運(yùn)行結(jié)果：
scale(x,y) 設(shè)置2D縮放，scale(x) 則僅通過設(shè)置x軸的值來定義縮放轉(zhuǎn)換，代碼示例：
運(yùn)行結(jié)果：
skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉(zhuǎn)換，單位是角度deg，代碼示例：
運(yùn)行結(jié)果：
思維導(dǎo)圖：
其他的屬性使用方式參考：
過渡屬性：
transition 屬性是一個(gè)用于設(shè)置過渡效果的屬性，可以設(shè)置2D轉(zhuǎn)換的過渡、寬高變化的過渡、背景或字體顏色的過渡。
這個(gè)屬性要配合hover使用，當(dāng)鼠標(biāo)移動(dòng)到改該定義的元素時(shí)就會(huì)出現(xiàn)過渡效果，2D縮放過渡效果代碼示例：
運(yùn)行結(jié)果：
寬度和背景顏色過渡，代碼示例：
其實(shí)邏輯很簡(jiǎn)單，就是先在標(biāo)簽樣式里先定義好初始的樣式效果和要過渡的屬性和時(shí)間，然后在標(biāo)簽的hover狀態(tài)樣式里定義鼠標(biāo)移動(dòng)上去后的樣式效果，過渡其實(shí)就是把這個(gè)改變樣式效果的過程變緩慢了。
運(yùn)行結(jié)果：
2D旋轉(zhuǎn)過渡代碼示例：
運(yùn)行結(jié)果：
以上只是介紹到transition屬性規(guī)定完成過渡效果需要多少秒或毫秒的操作，剩下還有幾個(gè)效果可以參考以下語法，或訪問w3cshool網(wǎng)站查詢更多的用法。
網(wǎng)址：http://www.w3school.com.cn/cssref/pr_transition.asp
先介紹幾個(gè)屬性：
position屬性，用于規(guī)定元素的定位類型。
position屬性的absolute值用于生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
其實(shí)簡(jiǎn)單來說就是通過絕對(duì)定位，元素可以放置到頁面上的任意位置，例如div，我給div設(shè)置了絕對(duì)定位就可以任意的通過"left", "top", "right" 以及 "bottom" 屬性設(shè)置它在網(wǎng)頁中的位置。
代碼示例：
運(yùn)行結(jié)果：
z-index屬性，定義div層的序號(hào)，例如：z-index屬性值為2的層，那么這個(gè)層就在z-index屬性值為1的層上面。
代碼示例：
運(yùn)行結(jié)果：
結(jié)合以上介紹的知識(shí)點(diǎn)，我們可以做一個(gè)簡(jiǎn)單的例題，例如：當(dāng)我們有時(shí)候登錄某個(gè)網(wǎng)站的賬戶時(shí)，會(huì)發(fā)現(xiàn)當(dāng)?shù)卿浀妮斎肟驈棾鰜淼臅r(shí)候除了登錄的輸入框之外就不能點(diǎn)擊網(wǎng)頁的其他地方了，這其實(shí)就是使用了div層的效果，把網(wǎng)頁都給蓋住了。而且有些登錄的輸入框當(dāng)我們把鼠標(biāo)移動(dòng)上去后還會(huì)有旋轉(zhuǎn)放大之類的效果，這是使用到了過渡樣式。現(xiàn)在我們做一個(gè)類似于這樣子的網(wǎng)頁。
代碼示例：
運(yùn)行結(jié)果：
