[UniMarket] CSS 中的偽 3D

CSS 3D

圖片來源：https://codepen.io/nxworld/pen/zwGpXr

偽 3D

還記得美術課的素描蘋果嗎？

CSS 中的偽 3D ，其實就很像我們在實體素描時學到的概念，主要是利用光影與線條深淺來使物件本身產生立體感。除了物件本身還有一個很重要的角色，那就是「觀看者」，當觀看者的視角及觀測距離發生變化時，物件所呈現的的大小、角度、深度等也會隨之改變。

同理，在製作 CSS 3D 效果時，可以把相關參數拆分為元素、觀看者與元素的距離兩個部分來看：

01/ 控制元素本身

明暗：陰影(Shadow)、漸層(Gradient)
變形 (Transform )：轉換(Translate)、縮放(Scale)、傾斜(Skew)、旋轉(Rotate)

CSS Transform 示意，圖片來源：webflow

02/ 觀看者與元素的距離

深度(Z軸)：透視（Perspective）

Perspective Example

有了大致上的概念後，接下來讓我們看看其他創作者如何發揮創意，運用這些 CSS 參數在畫面上玩出各種 3D 視覺效果。

▎3D Elements

# 立體文字

[A-202009–1–1]

# Peeled 效果
可以衍伸出剝落及撕開的感覺。

[A-202009–1–2]

# 翻字鐘
計時也可以很美。

[A-202009–1–3]

# 3D 實物
看似簡單的形狀拼接，但其實創作者在每個小細節上都加上了 CSS 動畫（Animation），讓擺盪中的貓顯得更加靈活靈活現。

[A-202009–1–4]

# 3D 模型

[A-202009–1–5]

# 翻書效果

[A-202009–1–6]

# 景深字幕

[A-202009–1–7]

▎3D Interaction

當使用者滑入（Hover）或點擊時才改變元素的空間狀態，有時候以互動的方式讓使用者去感受，或許會比直接呈現更讓人印象深刻！

# 圖層懸停
運用：展示細節或模型。

[A-202009–1–8]

# 翻面效果
運用：翻牌小遊戲，商品列表(需維持畫面簡潔時，可用於隱藏次要細節)。

[A-202009–1–9]

運用：顯示商品背面。

[A-202009–1–10]

# 旋轉立方體
運用：相較於翻面效果，可以展示物品更多面向。

[A-202009–1–11]

# 懸浮選單

[A-202009–1–12]

範例來源

CodePen