本頁面由 Cloud Translation API 翻譯而成。

3D 和 CSS
bookmark_border 透過集合功能整理內容你可以依據偏好儲存及分類內容。

Paul Kinlan

簡介

長久以來，3D 一直是電腦應用程式的專利。近期推出的智慧型手機已可使用原生 GPU 加速功能，因此我們開始看到 3D 技術幾乎無所不在。

3D 通常用於遊戲裝置或某些進階使用者介面。直到 WPF 和 Silverlight 推出透視轉換功能，才有適合將 3D 效果套用至使用者介面元素的模型，成為應用程式開發人員實用的解決方案 (畢竟 3D 並非易事)。

CSS 3D 轉換模型於 2009 年 3 月推出，當時是一份草擬規格，可讓網頁開發人員建立有趣且引人入勝的使用者介面，並利用 3D 技術讓應用程式作者將 3D 透視轉換套用至任何視覺 DOM 元素。

CSS 3D 轉換工作草案是 CSS 2D 轉換模型的邏輯擴充功能，引入了一些額外屬性，包括 3D 空間中的觀點、旋轉和轉換。

我們從未如此輕鬆地建構 3D 介面。這些技術降低了入門門檻，您不必再是數學高手，也能建立 3D 元素。

請注意，CSS 3D 模組旨在協助開發人員建構豐富且視覺效果出色的應用程式，並非用於建構沉浸式 3D 世界。

Browser Support

Browser Support

請記住，雖然瀏覽器可能「支援」3D，但由於硬體和驅動程式限制，可能無法算繪 3D。以 DOM 為基礎的 3D 場景可能會耗費大量運算資源，因此瀏覽器供應商決定不使用純軟體算繪解決方案，以免拖慢瀏覽器速度，而是改用 GPU 來發揮效益 (但可能無法在所有平台上使用)。

那麼特徵偵測呢？我希望你不會問這個問題！開發人員一直以來都使用 Modernizr 等工具，偵測特定瀏覽器功能和能力的支援情形。雖然可以偵測是否支援 3D 轉換，但無法偵測是否有硬體加速功能，而硬體加速是關鍵要素。

直接開始使用是最好的方法。在這個範例中，我們會為任意 DOM 元素套用基本旋轉組合。

首先，我們會在根元素上定義觀點。

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

透視效果很重要，因為它會定義 3D 場景的算繪深度，值介於 1 到 1000 之間會產生明顯的效果，值超過 1000 則會降低效果。

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

砰！這樣就完成了，元素可完全互動，且從各方面來看，它都是完整的 DOM 元素 (只是現在看起來更酷炫)。如果您的瀏覽器不支援 3D 轉換，系統不會執行任何動作。您只會看到沒有旋轉效果的簡單 iframe。如果瀏覽器支援 3D 轉換，但沒有硬體加速功能，畫面可能會看起來有點奇怪。

我喜歡 CSS3 3D 轉換的部分是，它與 CSS 轉場模組搭配得非常完美。動畫和轉場效果很容易在 CSS 中定義，套用至 3D 也是如此。

為套用 3D 透視效果的元素製作動畫很簡單。只要將「轉場」樣式設為「轉換」，並附加時間長度和動畫函式即可。從那時起，任何對「transform」樣式的變更都會產生動畫效果。

我們已重新調整先前的範例，改用文件樣式而非內嵌樣式。這不僅可讓範例更清楚，還可讓範例充分利用 :hover 擬似選取器。使用 :hover 選取器後，只要將滑鼠游標移到元素上，即可啟動轉場效果。太棒了！

這只是快速瀏覽一些酷炫效果，這些效果可透過 CSS 3D 轉換套用至任何可見的 DOM 元素。本教學課程未涵蓋的內容仍有許多。