你編寫了 HTML，CSS 看起來也恰到好處，你的網頁看起來很棒。但還是少了點什麼。你想讓自己的網站充滿活力，讓人眼前一亮。
這就是 CSS 變換的用武之地。
這項強大的功能可以讓你移動、調整大小、旋轉甚至傾斜頁面上的元素。它就像一個小魔法，讓你的設計充滿互動和活力。
試想一下，當你將滑鼠懸停在網站上時，你可能會看到傾斜的圖片；當你將滑鼠懸停在某物上時，你可能會看到放大效果；當你將滑鼠懸停在某按鈕上時，你可能會看到該按鈕上的圖示會移動。
這就是 CSS 變換在幕後的作用。
這個簡單的屬性可以徹底改變使用者與網站的互動方式。在本指南中，我們將學習如何建立互動式視覺效果，讓你的網站與眾不同。
讓我們深入瞭解！
瞭解 CSS 變換的基礎知識
在學習 CSS 變換之前，你需要打下堅實的 CSS 基礎。如果你還不瞭解 CSS，請檢視我們關於學習 CSS 的博文。
現在，讓我們直接進入 CSS 變換。CSS 變換可讓你對元素進行視覺化操作。
比如旋轉、縮放、傾斜或移動。這些變化發生在二維或三維空間中，為你提供了極大的創作自由。
下面是為元素新增一個簡單 CSS 變換的示意圖：
這裡：
element是要轉換的元素的選擇器。function(value)告訴你具體的變換和你想要的變換程度。
transform 屬性支援多個函式，將它們組合起來可以建立複雜的二維和三維變換。
讓我們來探索其中的一些，好嗎？
探索二維 CSS 變換
CSS 變換非常酷，它可以讓你操控元素在網頁上的顯示方式。想想看，這就像在現實生活中移動東西一樣，只不過是用程式碼而已。下面，我們將介紹 CSS 中的一些二維變換。
旋轉元素
使用 CSS 變換最常見的用途之一就是旋轉。假設你有一個寫著 Click Me 的按鈕，或者你網站上的任何按鈕。我們可以使用 CSS 中的 rotate 函式，讓它變得更有趣一些。
比方說，你的網站上有一個 CTA 按鈕：Click Me。下面是如何使用 rotate() 使其脫穎而出的方法：
.cta-button {
transition: transform 0.3s;
}
.cta-button:hover {
transform: rotate(-10deg);
}
那麼，我們在這裡做什麼呢？
我們指定，當有人將滑鼠懸停在按鈕上時，按鈕應旋轉 -10 度。
0.3 秒的過渡時間規定了動畫完成所需的時間。這樣，使用者就不會一下子就切換到旋轉位置，而是需要一點時間來顯示從正常狀態到旋轉狀態的平滑過渡。
縮放元素
使用 scale() 函式，您可以在設計中建立深度感、強調感和視覺層次感。
比方說，您手頭有一些客戶評價，您想向網站訪客展示這些評價。
現在，我們不想讓它們平鋪在頁面上。通過 CSS 變換，當使用者的游標懸停在這些推薦語上時，就能讓它們躍然紙上。
.testimonial-card {
transition: transform 0.3s;
}
.testimonial-card:hover {
transform: scale(1.1);
}
我們在這裡做什麼？
- 首先，我們針對每個推薦容器。我們假定該類為
testimonial-card。 transition屬性在 0.3 秒內平滑了縮放效果，因此感覺很自然。- 當使用者將滑鼠懸停在卡片上時，卡片會微妙地放大一點（原始大小的 1.05 倍）。
這一細微的變化抓住了使用者的眼球，使特定的推薦語脫穎而出。這在頁面上是一個微妙的差別，但肯定會引起注意。
傾斜元素
傾斜是一種變換，可讓元素沿 X 軸或 Y 軸傾斜，從而產生運動感和動感。
特別是，skew() 變換提供了一種為網站元素引入動感和活力的方法。
考慮一下專門用於客戶評價的部分。下面介紹如何使用 skew() 使其脫穎而出：
.testimonial {
transition: transform 0.3s;
}
.testimonial:hover {
transform: skewX(-10deg);
}
當使用者將滑鼠懸停在推薦語上時，它會沿著 X 軸微妙地傾斜 -10 度。
這種微小的傾斜是通過 CSS 變換屬性中的 skewX() 函式實現的，既增加了視覺趣味性，又不會過分分散注意力。
您還會注意到，我們一直在新增過渡屬性，指定動畫完成的時間為 0.3 秒。
變換移動元素
網頁設計中的平移是指在頁面中移動元素。
你可以這樣想：你在網格上定位元素，你可以沿 X、Y 或甚至 Z 軸移動它們，而無需改變或移動其他任何東西。
假設你的網站上有一個導航欄。當訪客的游標停留在選單項上時，你希望它能做出微妙的反應。
使用 translate( )，您就可以實現這一目標。讓我們來看一些程式碼，以便更好地理解這一點：
.menu-item {
transition: transform 0.2s;
}
.menu-item:hover {
transform: translateX(10px);
}
我們在這裡做的是應用一個簡單的過渡效果。現在，當你將游標懸停在.menu-item 上時，它會平滑地向右移動 10 個畫素。很酷吧？
翻譯的美妙之處在於，它們不僅限於懸停效果。你可以用它們為網站元素建立炫酷的進出動畫，當你在特定頁面時移動與該頁面相關的專案，等等。
三維 CSS 變換基礎
我們現在熟悉的是上下左右移動，這是典型的 2D 移動。
不過，CSS 可以讓你進入 3D 變換的世界，我們可以沿 Z 軸對元素進行操作。
那麼，CSS 提供了哪些 3D 變換功能呢？
- 首先是旋轉函式：
rotateX(angle)、rotateY(angle)和rotateZ(angle)。從這個角度來看，rotateZ就像我們旋轉的車輪，rotateY就像翻動的書頁，而rotateX就像翻轉的硬幣。它們分別控制繞各自軸線的旋轉。 translateZ(z)可以沿 Z 軸平移或移動元素。正值會使元素靠得更近，而負值則會使元素靠得更遠。可以把它想象成調整相機的變焦，對焦到不同的深度。- 使用
scaleZ(z) function可以沿 Z 軸縮放元素。這就好比沿著一條線拉伸或壓縮一個元素。大於 1 的值會使元素看起來離你更近，而介於 0 和 1 之間的值則會使元素退到背景中。
要建立 3D 變換效果，需要在父元素上設定透視。透視屬性決定了觀察者與z=0 平面之間的距離，從而影響對 3D 變換的感知。
讓我們再新增一些樣式，如寬度、高度和背景顏色，以便從螢幕上觀看時，過渡效果更加清晰：
.parent {
perspective: 500px;
width: 200px;
height: 200px;
margin: 100px auto;
}
.child {
width: 200px;
height: 200px;
background-color: blue;
transform: rotateY(45deg);
transition: transform 0.5s;
}
.child:hover {
transform: rotateY(0deg);
}
下面是 HTML 程式碼的樣子：
<body> <div class="parent"> <div class="child"></div> </div> </body>
我們有兩個 div：父 div 和子 div。父 div，即我們的舞臺，透視設定為 500 畫素。子代（紅色正方形）最初使用 rotateY(45deg) 沿 Y 軸旋轉 45 度。
懸停時，我們使用 transform: rotateY(0deg) 重置旋轉，使其順利返回到初始位置。
控制 CSS 變換原點
預設情況下，CSS 變換圍繞元素的中心點進行。不過，你可以使用 transform-origin 屬性改變原點。通過該屬性，你可以指定圍繞該點進行變換的 X、Y 和 Z 座標。
transform-origin 屬性的語法如下：
.element {
transform-origin: x-axis y-axis z-axis;
}
可以使用長度單位（如畫素）、百分比或關鍵字（left, center, right, top, 或 bottom）指定 x-axis 和 y-axis。Z 軸值只適用於三維變換，並使用長度單位指定。
下面的示例演示了更改 transform-origin 對旋轉的影響：
.box {
transform: rotate(45deg);
transform-origin: top left;
}
在這種情況下，元素將圍繞其左上角而不是中心旋轉 45 度。
transform-origin 屬性可讓你對如何應用變換進行精細控制，從而建立更精確、更具視覺吸引力的效果。
通過組合建立複雜的 CSS 變換效果
CSS 變換屬性最強大的功能之一，就是可以將多個變換組合起來，建立複雜的視覺效果。通過將不同的變換功能連鎖在一起，你可以釋放自己的創造力，製作出獨特而迷人的設計。
比方說，您的電子商務網站上有一個產品卡。當使用者將滑鼠懸停在該卡片上時，您希望它放大、輕微旋轉，並以陰影效果從頁面上移開：
.product-card {
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: scale(1.05) rotate(5deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
當使用者將滑鼠懸停在產品卡上時，產品卡會平滑地縮放至原始大小的 1.05 倍，旋轉 5 度，併產生一個方框陰影，營造出一種升降效果。縮放、旋轉和陰影的組合創造了一種動態和引人入勝的互動效果。
小結
你已經花了不少時間學習 CSS 變換：旋轉、調整大小、傾斜和定位，這讓你可以建立一些複雜的視覺效果。這項技能對於建立能在不同螢幕上正常執行的網站，以及讓你的網站更具視覺吸引力，都非常有價值。
不過，你還可以用它做更多的事情。如果你有興趣深入學習，可以研究一下這些領域：
- 使用 CSS 製作平滑的過渡和動畫。
- 探索 3D 變換，為設計增加深度。
- 學習如何製作 SVG 影象動畫，以獲得更復雜的效果。
- 找到將變換與其他 CSS 屬性相結合的創新方法。
- 學習 Tailwind CSS 和 Bootstrap CSS，讓你的整個頁面看起來更漂亮。
要想取得更好的成績，最好的辦法就是不斷學習和嘗試新事物。這樣你才能發現可能的東西，並形成自己獨特的風格。
評論留言