# #50 CSS 3D Transform

> ⚠️ 本篇文章已搬遷至 [css.im1010ioio.dev](https://css.im1010ioio.dev/effects/css-3d-transform/)**，請至新站閱讀完整版**。

---

CSS 的 3D `transform` 讓我們可以在網頁上建立 3D 立體效果，讓元素看起來像是在一個 3D 空間中移動或旋轉。

要使用 3D `transform`，除了了解各種 3D 函數，還必須正確設置場景的深度和視角。在本篇文章中，我們將先了解如何建立 3D 場景，再學習常見的 3D `transform` 函數。

---

### 1\. 建立 3D 場景的基礎

在開始 3D `transform` 之前，我們需要設置一個具有深度的 3D 場景。這可以透過 `perspective`、`perspective-origin` 和 `transform-style: preserve-3d;` 這三個屬性來實現。

#### 1.1 `perspective` - 設定場景的深度

`perspective` 屬性決定了觀察者距離 3D 場景的距離，也就是說，它控制了元素的透視效果。

* 語法…