CSS 變換 – 平移、旋轉、縮放和傾斜

第 12 講：CSS 轉換 – 平移、旋轉、縮放與傾斜

歡迎來到《從基礎到輝煌》課程第十二講。今天，我們將探索 CSS 變換，這是一個強大的功能，可讓您操縱元素的位置、大小和方向。我們將介紹translate()、rotate()、scale()和skew()等變換函數的基礎知識。

---

1.變換屬性概述

transform 屬性可讓您對元素套用各種變換，例如平移、旋轉、縮放和傾斜。這些變換是相對於元素的原始位置應用的。

• 文法：

  transform: transform-function(value);

---

2.翻譯

translate() 函數將元素從原始位置沿著 X 軸和 Y 軸移動。您可以以像素 (px)、百分比 (%) 或其他單位指定值。

• 範例：將元素向右平移 50 像素，並向下平移 30 像素。

  .box {
    transform: translate(50px, 30px);
  }

在此範例中，.box 元素將從原始位置向右移動 50px，向下移動 30px。

---

3.旋轉

rotate() 函數繞固定點旋轉元素，預設情況下該固定點是元素的中心。旋轉角度以度 (deg) 為單位指定。

• 範例：將元素旋轉 45 度。

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

在這種情況下，.box 元素將繞其中心順時針旋轉 45 度。

---

4.規模

scale() 函數調整元素的大小。您可以指定 X 軸和 Y 軸的縮放因子。值 1 表示元素的原始大小，而大於或小於 1 的值分別增大或減少大小。

• 範例：將元素縮放到原始大小的 1.5 倍。

  .box {
    transform: scale(1.5);
  }

在此範例中，.box 元素將縮放至原始大小的 150%。

---

5.傾斜

skew() 函數使元素沿著 X 軸和 Y 軸傾斜。角度以度 (deg) 為單位指定。

• 範例：將元素沿 X 軸傾斜 20 度，沿 Y 軸傾斜 10 度。

  .box {
    transform: skew(20deg, 10deg);
  }

在這種情況下，.box 元素將水平傾斜 20 度，垂直傾斜 10 度。

---

6.組合變換函數

您可以將多個變換函數組合在一個變換屬性中。這些功能會按照它們出現的順序套用。

• 範例：組合平移、旋轉和縮放。

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

在此範例中：

• .box 先會被平移，然後旋轉，最後再縮放。每個轉換都按順序套用。

---

7.變換原點

transform-origin 屬性指定發生變換的點。預設情況下，這是元素的中心，但您可以將其變更為任意點。

• 範例：將變換原點改為左上角。

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

在這種情況下，.box 將圍繞其左上角而不是中心旋轉 45 度。

---

8. 3D 變換

CSS 也支援 3D 轉換。您可以使用perspective()、rotateX()、rotateY()和translateZ()等函數來建立3D效果。

• 範例：新增透視以建立 3D 效果。

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

在此範例中：

• .container 元素提供透視效果，使 .box 看起來在 3D 空間中旋轉。

---

練習運動

1. 使用 CSS 變換建立卡片翻轉動畫。懸停時卡片應旋轉 180 度以露出背面。
2. 嘗試組合平移、旋轉和縮放以在元素上創建獨特的效果。

---

下一步： 在下一課中，我們將深入研究 CSS 動畫 並學習如何為您的 Web 元素創建動態的動畫效果。準備好用動作讓您的設計變得栩栩如生！

---

在 LinkedIn 上關注我 -

裡多伊‧哈桑

以上是CSS 變換 – 平移、旋轉、縮放和傾斜的詳細內容。更多資訊請關注PHP中文網其他相關文章！