3D 和 CSS

Paul Kinlan

簡介

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

一般來說，3D 主要是用於遊戲或部分進階使用者介面的裝置。直到 WPF 和 Silverlight 推出 Perspective 轉換之後，才適合將 3D 效果套用至使用者介面元素的合適模型，成為應用程式開發人員的實用解決方案 (畢竟並非所有 3D 模型都很簡單)。

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

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

我們從未如此輕鬆地建構 3D 介面。這些技術降低了進入門檻，您不再需要精通數學才能建構 3D 元素。

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

瀏覽器支援和硬體加速

-webkit-perspective

-webkit-transform-3d

請記住，雖然瀏覽器可能「支援」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，並套用以 Z 軸和 Y 軸為中心的 30 度旋轉效果

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

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

動畫

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

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

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

摘要

這只是快速瀏覽一下，使用 CSS 3D 轉換功能，可將哪些酷炫效果套用至任何可見的 DOM 元素。本教學課程未涵蓋的內容還很多。