引言
長久以來，3D 是桌面應用程式的首選。最近引入支援原生 GPU 加速功能的先進智慧型手機之後，幾乎所有地方都開始採用 3D 技術。
3D 通常會是遊戲裝置，或一些進階使用者介面。但直到我們推出 WPF 和 Silverlight 的 Perspective 轉換，將 3D 效果套用至使用者介面元素的適當模型之後，才是應用程式開發人員的實用解決方案 (因為所有 3D 效果並非易事)。
CSS 3D 轉換模型已於 2009 年 3 月推出「草擬規格」，讓網頁開發人員能夠將 3D 視角轉換套用至任何視覺 DOM 元素，運用 3D 技術製作新奇有趣的使用者介面。
CSS 3D Transformation Working Draft 是 CSS 2D 轉換模型的邏輯延伸，引進了幾項額外屬性，包括：視角、旋轉，以及在 3D 空間中的轉換。
我們從前所未有地推出 3D 介面，這些技術也降低了進入障礙的門檻。即使不是數學達人，也能建立 3D 元素。
特別要注意的是，CSS 3D 模組是專為協助開發人員打造豐富而有趣的應用程式，並不是用來打造沉浸式 3D 世界，
瀏覽器支援和硬體加速
-webkit 觀點
-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 的值將產生非常明顯的效果，而值超過 1,000 值則較小。 然後，我們接著加入 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 Transition 模組完美結合。在 CSS 中可以輕鬆定義動畫和轉場效果，並將其套用至 3d 也不例外。
如要輕鬆為套用 3D 視角的元素建立動畫，做法很簡單。只要將「轉換」樣式設為「轉換」，然後附加時間長度和動畫函式即可。此後對「轉換」樣式所做的任何變更，都會以動畫呈現。
我們重構了先前的範例，以便使用文件樣式，而非內嵌樣式。不僅能清除範例，還能讓範例利用 :hover 虛擬選取器。使用 :hover 選取器時，只要將滑鼠遊標移到元素上，即可啟動轉場效果。太棒了！
摘要
我們只是概略介紹一些酷炫效果，可以用 CSS 3D 轉換功能套用至任何可見的 DOM 元素。而且還有許多這類操作，而本教學課程尚未談到。