#50 CSS 3D Transform

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

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 場景的距離，也就是說，它控制了元素的透視效果。

• 語法…