接下來會介紹幾個能讓網頁豐富起來的互動模式，Hover 、Transform 、Transition與Animation。

Hover

在使用網頁時，除了輸入文字，大部分的行為都是由滑鼠完成，而hover 在CSS 裡就是針對滑鼠滑過或停留的這個行為，觸發網頁上的物件進行變化。
他屬於選擇器的部分，所以是在想要有效果的標籤後面加上 :hover ，他就會對該標籤進行變化。顏色、字型、大小、顯示方式等等，所有CSS 能設定的外觀或功能，hover 都能進行改變。
透過 hover 能提升使用者體驗，清楚的顯示使用者滑鼠所在的目標以及進行一些使用提示。

a{
	color:#000000;
}

a:hover{
	color:#D15352;
}

原本的黑色文字，hover效果為紅色。

Transform

transform的效果分為2D 的位移、旋轉、縮放與簡單的3D 效果，可以直接顯示效果，也可以藉由hover進行觸發。

位移 translate(X , Y)

以物件中心為XY軸的(0,0)，往右往下為正值，往左往上為負值。
transform:translate(100px , 200px); 讓物件向下位移200px，向右位移100px。

旋轉 rotate(N deg)

transform:rotate(45deg); ：進行2D 平面的旋轉。
3D 旋轉可以以三軸分別作為設定：

• transform:rotateX(45deg); ：以X軸當作旋轉中心軸，進行旋轉。
• transform:rotateY(45deg); ：以Y軸當作旋轉中心軸，進行旋轉。
• transform:rotateZ(45deg); ：以Z軸當作旋轉中心軸，進行旋轉，效果與平面旋轉相同。

縮放 scale(N)

transform:scale(5);
將物件進行括弧中數字倍數的放大，縮小則是使用小數點。雖然也可以向旋轉一樣分別設定X, Y, Z軸，但只縮放一邊的話物件就會壓縮到，所以通常都是等比放大。

有一些功能我很少使用，所以沒特別提到。
而transform也可以與transition進行結合，這就待我們下一章的內容囉。

下一章 Transition

※本文章所使用之圖片皆為本人作品，內容則為本人之經驗分享