2D 和 3D 變換（Transforms）

發布於 2024/05/18 更新於 2024/11/12

作者 Ned Hsu 7 分鐘閱讀

2D 和 3D 變換

CSS 變換（Transforms）允許你改變元素的形狀、大小、位置和旋轉角度，使網頁元素呈現出不同的視覺效果。變換分為兩種：2D 變換和 3D 變換。2D 變換在二維平面上操作，3D 變換則增加了深度感，使元素呈現出三維效果。

1. 2D 變換（2D Transforms）

2D 變換允許你在平面上（X 軸和 Y 軸）改變元素的形狀或位置。常用的 2D 變換函數包括：translate、rotate、scale 和 skew。

1.1 `translate` 位移

translate 用於移動元素的位置。可以沿 X 軸（水平）和 Y 軸（垂直）移動元素。

語法：

  
transform: translate(x, y);

x：沿 X 軸移動的距離（可以是正值或負值）。
y：沿 Y 軸移動的距離（可以是正值或負值）。

範例：

  
.translate-example {
    transform: translate(50px, 100px); /* 向右移動 50px，向下移動 100px */
}

1.2 `rotate` 旋轉

rotate 用於繞元素中心點旋轉。可以指定順時針或逆時針旋轉的角度。

語法：

  
transform: rotate(angle);

angle：旋轉的角度（例如 45deg 表示順時針旋轉 45 度，-30deg 表示逆時針旋轉 30 度）。

範例：

  
.rotate-example {
    transform: rotate(45deg); /* 順時針旋轉 45 度 */
}

1.3 `scale` 縮放

scale 用於改變元素的大小。可以沿 X 軸和 Y 軸分別設置縮放比例。

語法：

  
transform: scale(sx, sy);

sx：沿 X 軸的縮放比例（1 表示原始大小，2 表示放大 2 倍，0.5 表示縮小為原來的一半）。
sy：沿 Y 軸的縮放比例（可以省略，若省略則與 sx 相同）。

範例：

  
.scale-example {
    transform: scale(1.5, 1); /* 水平方向放大 1.5 倍，垂直方向保持不變 */
}

1.4 `skew` 傾斜

skew 用於傾斜元素。可以沿 X 軸或 Y 軸傾斜元素，創建斜角效果。

語法：

  
transform: skew(x-angle, y-angle);

x-angle：沿 X 軸的傾斜角度。
y-angle：沿 Y 軸的傾斜角度。

範例：

  
.skew-example {
    transform: skew(30deg, 10deg); /* X 軸傾斜 30 度，Y 軸傾斜 10 度 */
}

1.5 多重 2D 變換

你可以將多個 2D 變換結合在一起，應用於同一個元素。多個變換之間用空格分隔，CSS 將按照指定的順序依次應用變換。

範例：

  
.combined-example {
    transform: translate(20px, 30px) rotate(45deg) scale(1.2); /* 先位移，再旋轉，最後縮放 */
}

2. 3D 變換（3D Transforms）

3D 變換允許你在三維空間中操作元素，增加了深度（Z 軸），從而創造更立體的效果。3D 變換函數包括：translate3d、rotate3d、scale3d 等。

2.1 `translate3d` 三維位移

translate3d 用於在三維空間中移動元素，可以沿 X、Y 和 Z 軸進行移動。

語法：

  
transform: translate3d(x, y, z);

x：沿 X 軸移動的距離。
y：沿 Y 軸移動的距離。
z：沿 Z 軸移動的距離（正值向前，負值向後）。

範例：

  
.translate3d-example {
    transform: translate3d(50px, 100px, 30px); /* 向右 50px，向下 100px，向前 30px */
}

2.2 `rotate3d` 三維旋轉

rotate3d 用於在三維空間中旋轉元素。需要指定旋轉的軸和角度。

語法：

  
transform: rotate3d(x, y, z, angle);

x、y、z：定義旋轉軸的向量（例如 (1, 0, 0) 表示 X 軸）。
angle：旋轉的角度。

範例：

  
.rotate3d-example {
    transform: rotate3d(1, 1, 0, 45deg); /* 圍繞 X 和 Y 軸的結合旋轉 45 度 */
}

2.3 `scale3d` 三維縮放

scale3d 用於改變元素在三維空間中的大小。可以沿 X、Y 和 Z 軸設置不同的縮放比例。

語法：

  
transform: scale3d(sx, sy, sz);

sx：沿 X 軸的縮放比例。
sy：沿 Y 軸的縮放比例。
sz：沿 Z 軸的縮放比例。

範例：

  
.scale3d-example {
    transform: scale3d(1.5, 1.2, 0.8); /* 沿 X 軸放大 1.5 倍，Y 軸放大 1.2 倍，Z 軸縮小為原來的 0.8 倍 */
}

2.4 `perspective` 透視效果

perspective 屬性用於設置三維空間的透視效果，使得距離更遠的物體看起來更小，距離更近的物體看起來更大。

語法：

  
perspective: length;

length：定義透視的距離，單位為像素（如 500px）。

範例：

  
.perspective-container {
    perspective: 600px; /* 設置容器的透視距離 */
}

.perspective-box {
    transform: rotateY(45deg); /* 在透視效果下旋轉元素 */
}

3. 結合 2D 和 3D 變換的應用實例

3.1 旋轉卡片效果

創建一個翻轉卡片的效果，當鼠標懸停時，卡片會沿 Y 軸翻轉。

  
.card-container {
    perspective: 1000px;
}

.card {
    width: 200px;
    height: 300px;
    transform-style: preserve-3d; /* 保持子元素的 3D 變換 */
    transition: transform 0.5s;
}

.card:hover {
    transform: rotateY(180deg); /* 鼠標懸停時翻轉 180 度 */
}

3.2 3D 旋轉立方體

創建一個可旋轉的 3D 立方體。

  
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d; /* 保持 3D 變換 */
    transform: rotateX(30deg) rotateY(45deg); /* 立方體的初始旋轉 */
    animation: spin 5s infinite linear; /* 添加旋轉動畫 */
}

@keyframes spin {
    from {
        transform: rotateX(30deg) rotateY(0deg);
    }
    to {
        transform: rotateX(30deg) rotateY(360deg); /* 完整旋轉一圈 */
    }
}

4. 小結

2D 和 3D 變換提供了豐富的方式來改變網頁元素的外觀和位置，使網頁更加動感和富有層次感。通過使用變換，開發者可以創建更具視覺吸引力和互動性的用戶體驗。

Software, CSS

CSS

本文章以 CC BY 4.0 授權

2D 和 3D 變換

1. 2D 變換（2D Transforms）

1.1 translate 位移

1.2 rotate 旋轉

1.3 scale 縮放

1.4 skew 傾斜