綜合變換

開放

3.1 綜合變換基礎

CSS 讓你可以結合多個變換來創造複雜的視覺效果。 這些變換可以包括 translaterotatescaleskew, 這些可以一起整合到一個 transform 屬性中。

transform 屬性可以包含多個以空格分隔的變換函數。它們會按順序依次應用。理解不同變換之間的相互作用 是創建複雜動畫和效果的關鍵。

語法:

element {
  transform: function1() function2() ... functionN();
}

範例:

CSS
element {
  transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}

移動和旋轉

在這個範例中,元素向右移動 50 像素及向下移動 50 像素,然後旋轉 45 度。

範例:

HTML
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移動和旋轉</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transform: translate(50px, 50px) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

代碼解釋:

  • .box: 元素首先向右移動 50 像素及向下移動 50 像素,然後以順時鐘方向旋轉 45 度

3.2 各種組合的分析

1. 縮放和傾斜

在這個範例中,元素首先在兩個軸上放大 1.5 倍,然後沿 X 軸傾斜 20 度和沿 Y 軸傾斜 10 度。

範例:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縮放和傾斜</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transform: scale(1.5) skew(20deg, 10deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

代碼解釋:

  • .box: 元素首先在兩個軸上放大 1.5 倍,然後沿 X 軸傾斜 20 度和沿 Y 軸傾斜 10 度

2. 移動、旋轉和縮放

在這個範例中,元素先向右移動 100 像素,旋轉 30 度並在 X 軸上放大 2 倍,Y 軸上放大 1.5 倍。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移動、旋轉和縮放</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

代碼解釋:

  • .box: 元素先向右移動 100 像素,然後旋轉 30 度,並在 X 軸上放大 2 倍,Y 軸上放大 1.5 倍

3.3 變換順序的影響

當多個變換結合在一起時,重要的是要理解它們是依次應用的。這意味著每個後續變換將影響到上一次變換的結果。

在這個範例中展示了如何改變變換順序影響最終結果。

範例 A: 先旋轉,後移動

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>先旋轉,後移動</title>
    <style>
      .box-a {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transform: rotate(45deg) translate(50px, 50px);
      }
    </style>
  </head>
  <body>
    <div class="box-a"></div>
  </body>
</html>

範例 B: 先移動,後旋轉

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>先移動,後旋轉</title>
    <style>
      .box-b {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transform: translate(50px, 50px) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box-b"></div>
  </body>
</html>

代碼解釋:

  • .box-a: 元素首先旋轉 45 度,然後向右及向下移動 50 像素,這使得元素從它的新位置沿對角線移動
  • .box-b: 元素首先向右及向下移動 50 像素,然後旋轉 45 度,這使得元素相對於它的新位置旋轉
1
任務
Frontend SELF TW,  等級 23課堂 2
上鎖
完整變形
完整變形
1
任務
Frontend SELF TW,  等級 23課堂 2
上鎖
變換順序
變換順序
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言