3D & Depth

排成環形的面板在 3D 空間中繞垂直軸旋轉。

在[套用位置]加入「3D 輪播」(3D Carousel)，也叫 rotating ring carousel。
把面板排成透視下的環形；每次按「下一個」，整個環繞垂直軸平順轉動，把下一塊面板轉到正前方。
控制項要能用鍵盤操作，並向螢幕閱讀器報讀目前面板；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，改用簡單的淡入淡出。

帶有標記點或弧線的 3D 地球在版面中旋轉。

在[套用位置]加入「3D 地球儀」(3D Globe)，也叫互動地球儀 (interactive globe)。
表面有幾個標記點的地球儀繞軸緩慢等速轉動，標記點隨之一起轉：平靜而連續。
把它當作裝飾，為其呈現的資訊提供文字替代；移出畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。

懸停時卡片向後透視傾斜，同時一枚圖釘和光暈朝觀看者升起。

在[套用位置]加入「3D 圖釘」(3D Pin) 懸停效果，也叫 pin hover 3D。
游標停在卡片上時，卡片向後透視傾斜，同時一枚底部帶柔和光暈的圖釘從中心升起；游標移開後一切復原：平順，不要彈跳。
保持卡片在版面中所占空間不變，鍵盤焦點時也呈現同樣的效果。

卡片朝游標方向透視旋轉，分層內容從表面浮起。

在[套用位置]加入「3D 傾斜」(3D Tilt) 效果，也叫 perspective tilt 或 tilt card。
游標移動時，卡片朝游標方向透視傾斜，內部各層以不同深度從表面浮起；游標移開後平順地恢復平放：平順而含蓄。
傾斜幅度要小，確保文字易讀；在觸控裝置上，以及使用者開啟了「減少動態效果」(prefers-reduced-motion)時，讓卡片保持平放。

卡片繞軸翻轉半圈，露出背面。

在[套用位置]加入「卡片翻轉」(Card Flip) 效果，也叫 flip card 或 card flip 3D。
游標停在卡片上時，卡片繞垂直軸透視翻轉、露出背面；游標移開後翻回來：平順而穩定。
隱藏每個面的背側，避免正反兩面互相透出；鍵盤焦點和觸控裝置上的輕點也要能觸發翻轉。

卡片略微錯開地疊在一起，最上面的卡片移開，露出下一張。

在[套用位置]加入「卡片堆疊」(Card Stack)，也叫 stacked cards。
把卡片略微錯開地一張張疊在後面；每次點擊，最上面的卡片往一側甩開並塞到最後，其餘卡片依序前移：平順，輕快俐落。
支援鍵盤操作，讓螢幕閱讀器能依序讀到每張卡片；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，改用簡單的淡入淡出。

中間的項目正對前方，兩側的項目透視斜向後方。

在[套用位置]加入「封面流」(Coverflow) 輪播，也叫 cover flow carousel。
中間的項目正對前方，兩側的項目透視地轉向後方；橫向拖曳時整排滑動，放開後平順地停在最近的項目上。
除了拖曳還要支援方向鍵和滑動手勢，並確保觸控裝置上頁面仍能正常垂直捲動。

內容分布在立方體的各個面上，立方體旋轉以顯示下一個面。

在[套用位置]加入「立方體旋轉」(Cube Rotate) 切換效果，也叫 3D cube 或 cube transition。
把內容放在透視立方體的各個側面上；每次按「下一個」，立方體繞垂直軸平順轉動，把下一個面轉到正前方。
只讓正面能被鍵盤和螢幕閱讀器存取；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，改用簡單的淡入淡出。

一道明亮的高光像反光一樣隨游標在卡片表面移動。

在[套用位置]加入「炫光全像卡片」(Glare / Holographic Card) 效果，也叫 glare card 或 glare hover。
一道柔和明亮的高光隨游標在卡片表面移動，像光線在上面反射，同時卡片朝游標方向微微傾斜；游標移開後兩者都淡出：平順而含蓄。
讓點擊能穿透高光層，確保底下的內容清楚易讀；在觸控裝置上顯示不帶高光的卡片。