CSS - 2D Transforms: 帶領你的網頁元素跳起舞

引言

你好啊，未來的網頁設計超級巨星！今天，我們將踏上一段令人興奮的旅程，進入 CSS 2D 變換的世界。在本教程結束時，你將能夠讓你的網頁元素跳舞、旋轉和縮放，如同從未見過的一般。所以，系好安全帶，讓我們一起潛入水中！

CSS - 2d transform

在我們讓事物移動之前，讓我們先了解一下 CSS 2D 變換是什麼。簡單來說，2D 變換讓你能在兩維空間中修改元素。這意味著你可以移動、旋轉、縮放和傾斜元素，而不會影響頁面上其他元素的佈局。

想象一下在平坦的表面上玩紙剪影。你可以將它們滑動，讓它們變大或變小，或者將它們在不同的角度傾斜。這就是我們將對我們的網頁元素進行的事情！

2D 變換的核心是 transform 屬性。這個神奇的 CSS 屬性是所有動作發生的地方。這裡是基本的語法：

選擇器 {
transform: 函数(值);
}

如果這現在看起來有點抽象，別擔心。我們將在進行的過程中用許多例子來分解它。

現在，讓我們看看我們可以使用哪些不同的變換函數。我喜歡將這些函數看作是我們可以給元素的特殊能力。以下是一個總結主要 2D 變換函數的表格：

讓我們詳細探索每一個！

translate() 函數讓你可以從元素當前位置移動它。這就像給你的元素一個在任何方向上的小推力。

.box {
width: 100px;
height: 100px;
background-color: blue;
transform: translate(50px, 30px);
}

在這個例子中，我們的藍色方框將從原始位置向右移動 50 像素，向下移動 30 像素。這就像告訴你的元素，“向右走 50 步，向下走 30 步。”

你也可以使用 translateX() 和 translateY() 水平或垂直移動元素：

.box-x {
transform: translateX(50px); /* 向右移動 50px */
}

.box-y {
transform: translateY(30px); /* 向下移動 30px */
}

使用 rotate()，你可以讓你的元素像唱片一樣旋轉！這個值以度（deg）為單位指定。

.box {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(45deg);
}

這會讓我們的綠色方框順時針旋轉 45 度。想要逆時針旋轉？只需使用負值：

.box-counter {
transform: rotate(-45deg);
}

scale() 函數讓你可以改變元素的大小。1 的值保持原始大小，小於 1 的值使其變小，大於 1 的值使其變大。

.box {
width: 100px;
height: 100px;
background-color: red;
transform: scale(1.5);
}

這會讓我們的紅色方框在寬度和高度上都變大 50%。你也可以獨立縮放寬度和高度：

.box-custom {
transform: scale(2, 0.5); /* 寬度加倍，高度減半 */
}

skew() 函數讓你可以傾斜你的元素。這就像將一幅畫框傾斜到一邊。這些值以度數為單位指定。

.box {
width: 100px;
height: 100px;
background-color: yellow;
transform: skew(20deg, 10deg);
}

這會讓我們的黃色方框沿 X 軸傾斜 20 度，沿 Y 軸傾斜 10 度。你也可以使用 skewX() 和 skewY() 為單一軸傾斜。

matrix() 函數是變換中的強力工具。它讓你可以將所有變換函數組合在一起。它接受六個參數：a, b, c, d, e, 和 f。

.box {
transform: matrix(1, 0.5, -0.5, 1, 30, 10);
}

這可能看起來令人敬畏，但它基本上是在一個動作中組合縮放、傾斜和移動。不必擔心馬上掌握這個——這是一種進階技術，你會在變換上變得越來越熟悉時逐漸熟悉。

真正的魔法發生在你開始組合不同的變換時。你可以通過在變換之間添加空格來將多個變換應用於元素：

.super-box {
width: 100px;
height: 100px;
background-color: purple;
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

這會讓我們的紫色方框向右和向下移動 50 像素，旋轉 45 度，並放大 50%。這就像給你的元素超能力！

默認情況下，變換是從元素的中心應用的。但如果你想要從角落旋轉或從頂部縮放呢？這就是 transform-origin 來得及的地方：

.box {
width: 100px;
height: 100px;
background-color: orange;
transform: rotate(45deg);
transform-origin: top left;
}

這會讓我們的橙色方框旋轉 45 度，但是從其左上角而不是中心。

至此，各位！你已經踏上了 CSS 2D 變換令人興奮世界的第一步。記住，掌握這些技術的關鍵是實踐。所以，繼續前進，嘗試不同的組合，並觀察你的網頁元素是如何變活的！

在你繼續網頁開發的旅程中，你會發現變換不僅僅是讓事物看起來很酷（雖然它們確實如此）。它是創建有交互性和響應性設計的強大工具，可以大大提高用戶體驗。

所以，繼續探索，繼續創造，最重要的是，玩得開心！誰知道呢？下一個令人驚艷的網頁動畫可能就是一次變換之遙。快樂編程！

Credits: Image by storyset