🖼️ #60 專屬創意 3D 畫廊：純 CSS transform-style preserve-3d 真實 3D 空間 + 拖曳旋轉 + 慣性滑動 + 倒影效果
#60「**🖼️ 專屬創意 3D 畫廊**」是阿凱用**純靜態零依賴**寫的 3D 旋轉木馬照片畫廊。CSS `transform-style: preserve-3d` 真實 3D 空間感 + 滑鼠拖曳旋轉 + 觸控手勢 + **慣性滑動效果**（仿物理摩擦感）+ 本機圖片上傳 + `-webkit-box-reflect` 地板倒影 + RWD。
「3D 畫廊」展示學生作品的真實場景
學校每學期累積大量學生作品：
- 美術課畫作
- 手作課成品
- 戶外教學照片
- 校慶活動紀錄
傳統呈現方式：
- ❌ 公佈欄貼紙本：空間有限 + 易掉
- ❌ PowerPoint 跑馬燈：太老氣
- ❌ YouTube 影片：不互動
- ❌ Google Photos：操作太繁
阿凱的 #60 專屬創意 3D 畫廊 反向：真實 3D 旋轉木馬 + 拖曳互動 + 倒影效果。
#60 真實怎麼做？
真實標題：「🖼️ 專屬創意 3D 畫廊」
核心定位：「一個純靜態、零依賴的互動式 3D 旋轉木馬照片畫廊，支援本機圖片上傳與完整觸控操作」
完整 7 大功能（從 README 抽出）：
功能 A：🎠 3D 旋轉木馬
- 使用純 CSS
transform-style: preserve-3d - 真正的 3D 空間感（不是 2D 模擬）
功能 B：🖱️ 滑鼠拖曳旋轉
- 以左右拖曳手勢動態旋轉畫廊
功能 C：📱 觸控手勢支援
- 完整支援手機與平板的滑動操作
功能 D：⚡ 慣性滑動效果（神細節）
- 放開後畫廊持續以衰減速度旋轉
- 仿物理摩擦感
- 不是立刻停止，像真實旋轉物體
功能 E：📁 本機圖片上傳
- 直接從裝置選任意數量圖片
- 即時更新畫廊
- 不需後端
功能 F：🌙 倒影效果
- 使用
-webkit-box-reflect - 生成美麗的地板倒影
- 像高級藝廊展示
功能 G：📐 RWD 響應式
- 自動適應手機 / 平板 / 桌機
真實技術棧（極簡）
- 純靜態 HTML / CSS / JavaScript
- 零依賴（無 React / Vue / 框架）
- 部署：
cagoooo.github.io/3D/ - README 74 KB 超詳細（推測含完整技術解說）
為什麼用「純 CSS 3D」而不是 Three.js？
對比阿凱另兩個 3D 工具：
- #29 太陽系探索者 = Three.js（複雜模型 + 物理）
- #60 3D 畫廊（本篇）= 純 CSS
preserve-3d（簡單旋轉）
選擇邏輯：
- ✅ 簡單 3D 場景 → 純 CSS（零依賴 + 載入快）
- ✅ 複雜 3D 模型 → Three.js（功能完整）
用對工具是工程師的修養（再次！）— 阿凱不會為了簡單畫廊套整個 Three.js 引擎。
transform-style: preserve-3d 是什麼？
CSS 3D 變形的關鍵屬性：
.gallery {
transform-style: preserve-3d; /* 子元素保留 3D 變形 */
perspective: 1000px; /* 透視距離 */
transform: rotateY(0deg); /* 旋轉角度 */
}
.photo {
transform: translateZ(300px); /* 推到 3D 空間中 */
}
→ 真實 3D 空間感（不是 2D 平移模擬）。
跟 #32 #34 觸屏互動系列
| # | 工具 | 互動類型 |
|---|---|---|
| #32 觸屏碰碰碰 | 點擊互動 | 隨機圖案浮動 |
| #34 影像聲音遊戲區 | 多元互動 | 抓按鈕 + 拍照 + 360° |
| #60 3D 畫廊（本篇） | 拖曳旋轉互動 | 3D 空間感 |
阿凱「為大型觸控螢幕設計」系列再 +1 案例。
教學情境
藝術與人文課展學生作品：
- 學生美術課完作 → 拍照上傳 #60
- 課堂大螢幕投影 → 拖曳旋轉看
- 比一張張投影片好看 10 倍
校慶 / 親職日展覽：
- 走廊大型觸控螢幕掛 #60
- 家長路過拖一下 → 看 3D 旋轉作品集
- 比海報生動 100 倍
畢業班禮物：
- 整年活動照片 → 上傳 #60
- 6 年級畢業典禮投影
- 學生看自己 3D 畫廊會哭
學期末展覽：
- 整學期作品集中展示
- 家長日 / 校長視察都能用
配對工具推薦
- #29 太陽系探索者 — Three.js 3D 案例
- #32 觸屏碰碰碰 — 觸屏互動系列
- #68 學生作品上傳 — 同款學生作品集
適用對象
- 藝術與人文 / 美術老師（展示學生作品）
- 攝影社 / 媒體社指導
- 學校公關 / 行銷（校慶宣傳）
- 想看「純 CSS 3D + 慣性滑動」案例的開發者
- 想做「零依賴 web 畫廊」的設計師
想試試？
第一次玩 — 本機上傳幾張照片 → 拖曳旋轉 → 看 慣性滑動 + 倒影效果 = **「這是純 CSS？」**會驚豔。