以下是繁體中文翻譯的內容：

# CSS - 3D Transforms：為您的網頁設計帶來深度

你好，未來的網頁設計師們！今天，我們將踏上一段令人興奮的旅程，進入CSS 3D變換的世界。作為你們親切鄰居的電腦老師，我很高興能夠引導你們進入這個迷人的主題。別擔心如果你是編程新手——我們將從基礎開始，逐步學習。在本課結束時，你將能夠創作出讓你的網站閃耀的3D傑作！

## 什麼是CSS 3D Transforms？

想像你手中有一張紙。在網頁設計的世界中，那就是你典型的2D網頁。現在，如果你能折疊這張紙，旋轉它，或是讓它站起來呢？這就是CSS 3D變換讓我們能對網頁元素做的事情！

CSS 3D變換賦予我們在三维空間中操縱元素的能力。我們可以沿著X、Y和Z軸旋轉、平移（移動）和縮放元素。Z軸是為我們的設計添加深度的軸，使元素看起來更接近或更遠。

## 開場：Transform屬性

在我們潛入3D世界之前，讓我們快速回顧一下`transform`屬性。這是我們用來應用3D變換的魔法棒。

```css
.element {
  transform: function(value);
}

在這種語法中，function是我們想要應用的變換類型，value是我們想要變換元素的程度。

變換函數

現在，讓我們看看我們手頭上的主要3D變換函數：

函數	描述	範例
translate3d(x,y,z)	在3D空間中移動元素	transform: translate3d(10px, 20px, 30px);
translateZ(z)	沿著Z軸移動元素	transform: translateZ(30px);
scale3d(x,y,z)	在3D空間中縮放元素	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	沿著Z軸縮放元素	transform: scaleZ(2);
rotate3d(x,y,z,angle)	在3D空間中旋轉元素	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	围繞X軸旋轉元素	transform: rotateX(45deg);
rotateY(angle)	围繞Y軸旋轉元素	transform: rotateY(45deg);
rotateZ(angle)	围繞Z軸旋轉元素	transform: rotateZ(45deg);
perspective(n)	設置視角	transform: perspective(1000px);

別擔心這些看起來讓人眼花繚亂——我們會一一分解並提供範例！

讓我們開始變換！

在3D中的平移

讓我們從使用translate3d在3D空間中移動元素開始：

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translate3d(50px, 30px, 20px);
}

在這個範例中，我們的盒子向右移動50px，向下移動30px，向觀眾移動20px。就像盒子從屏幕上飄起來一樣！

在3D中的縮放

現在，讓我們讓我們的盒子在3D中增長或縮小：

.box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  transform: scale3d(1.5, 1.5, 2);
}

這種變換使我們的盒子在寬度和高度上變得1.5倍大，而在深度上變得兩倍大。

在3D中的旋轉

在3D中旋轉元素可以創造一些非常酷的效果：

.box {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

這個盒子正在做一個小舞蹈，圍繞X軸旋轉45度，圍繞Y軸旋轉30度，圍繞Z軸旋轉60度！

角度的重要性

現在，事情變得更加有趣。為了真正欣賞3D變換，我們需要添加視角。將視角想像為觀眾與物體之間的距離。

.container {
  perspective: 1000px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  transform: rotateY(45deg);
}

在這個範例中，我們為容器添加了視角。現在當我們旋轉盒子時，它看起來更加三维！

組合所有知識：創建一個3D立方體

讓我們把我們學到的所有知識結合起來，創建一個3D立方體：

<div class="scene">
  <div class="cube">
    <div class="face front">前面</div>
    <div class="face back">後面</div>
    <div class="face right">右面</div>
    <div class="face left">左面</div>
    <div class="face top">頂面</div>
    <div class="face bottom">底面</div>
  </div>
</div>

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
  transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

這段代碼創建了一個多彩的3D立方體，當你將鼠標悬停在上面時，它會旋轉。很酷吧？

結論

好了，各位！我們已經穿越了CSS 3D變換的精彩世界。從簡單的平移到創建一個完整的3D立方體，你現在有了為你的網頁設計添加深度和維度的能力。

記住，掌握3D變換的關鍵是練習。不要害怕嘗試不同的值和組合。誰知道呢？你可能會創造出網頁設計的下一個大熱門！

在我們結束時，我想到著名建築師Frank Lloyd Wright的一句名言：“空間是藝術的呼吸。”有了CSS 3D變換，你现在有了為你的網頁空間注入生命的工具。所以，勇往直前，創造令人驚奇的3D體驗吧！

快樂編程，願你的網頁設計總是充滿深度！

Credits: Image by storyset