聲明：本欄目所使用的素材都是凱哥學堂VIP學員所寫，學員有權匿名，對文章有最終解釋權；凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。

樣式效果：

2D轉換：

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

其中rotate屬性是用來定義2D旋轉的，屬性參數里面填寫的是旋轉的角度。

圖片旋轉代碼示例：

運行結果：

scale(x,y) 設置2D縮放，scale(x) 則僅通過設置x軸的值來定義縮放轉換，代碼示例：

運行結果：

skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉換，單位是角度deg，代碼示例：

運行結果：

思維導圖：

其他的屬性使用方式參考：

過渡屬性：

transition 屬性是一個用于設置過渡效果的屬性，可以設置2D轉換的過渡、寬高變化的過渡、背景或字體顏色的過渡。

這個屬性要配合hover使用，當鼠標移動到改該定義的元素時就會出現過渡效果，2D縮放過渡效果代碼示例：

運行結果：

寬度和背景顏色過渡，代碼示例：

其實邏輯很簡單，就是先在標簽樣式里先定義好初始的樣式效果和要過渡的屬性和時間，然后在標簽的hover狀態樣式里定義鼠標移動上去后的樣式效果，過渡其實就是把這個改變樣式效果的過程變緩慢了。

運行結果：

2D旋轉過渡代碼示例：

運行結果：

以上只是介紹到transition屬性規定完成過渡效果需要多少秒或毫秒的操作，剩下還有幾個效果可以參考以下語法，或訪問w3cshool網站查詢更多的用法。

網址：http://www.w3school.com.cn/cssref/pr_transition.asp

div層的制作：

先介紹幾個屬性：

position屬性，用于規定元素的定位類型。

position屬性的absolute值用于生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

其實簡單來說就是通過絕對定位，元素可以放置到頁面上的任意位置，例如div，我給div設置了絕對定位就可以任意的通過"left", "top", "right" 以及 "bottom" 屬性設置它在網頁中的位置。

代碼示例：

運行結果：

z-index屬性，定義div層的序號，例如：z-index屬性值為2的層，那么這個層就在z-index屬性值為1的層上面。

代碼示例：

運行結果：

結合以上介紹的知識點，我們可以做一個簡單的例題，例如：當我們有時候登錄某個網站的賬戶時，會發現當登錄的輸入框彈出來的時候除了登錄的輸入框之外就不能點擊網頁的其他地方了，這其實就是使用了div層的效果，把網頁都給蓋住了。而且有些登錄的輸入框當我們把鼠標移動上去后還會有旋轉放大之類的效果，這是使用到了過渡樣式。現在我們做一個類似于這樣子的網頁。

代碼示例：

運行結果：