会记住的那碗汤：纯 CSS 打造的 3D 治愈美食立体模型
来源：dev.to — 2026-08-03
📋 概述
这是 Frontend Challenge 治愈美食主题的 CSS Art 参赛作品。作者用纯 CSS 与 SVG 构建了一个可交互的 3D 立体模型“The Bowl That Remembers”，致敬全球五种治愈系汤品：拉面、Khichdi、Phở、Pozole 和粥。它支持鼠标拖拽倾斜、光标视差、手机陀螺仪，食材配菜全部用 SVG 渐变程序化渲染，点击碗可循环切换五种汤品并展示各自的故事。
🔑 核心要点
- 纯 CSS 3D：用多层 translateZ 深度、rotateX/rotateZ/perspective 构建光学 3D，不依赖 Three.js 等重库
- 程序化配菜：鸡蛋、葱花、辣油、鸣门卷等全部用 SVG 线性/径向渐变动态渲染，呈现真实光泽
- 多端交互：桌面支持鼠标拖拽倾斜与光标视差，移动端调用 deviceorientation API 陀螺仪
- 交互叙事：点击碗可循环展示 5 种全球汤品的独特注记与起源故事
💡 金句
Comfort food isn't just a meal—it's a memory.
👍 0
👎 0
← 返回 Dev.to 首页