3DScrollGalleryCSS 3D
创意 3D 魔方画廊
滚动驱动的 3D 立方体 · 深色/浅色主题
在下方演示区域内直接操作（鼠标 / 键盘 / 滚动）。
全屏打开演示简介
滚动驱动的大型 3D 立方体画廊：六个面分别展示 AI 生成的艺术作品，滚动时立方体平滑旋转切换面，配有进度指示、深色/浅色主题切换和文字卡片。
收录日期 2026-06-01 · 来源 前端嘛 · Code Fun
技术栈
HTMLCSS 3D TransformsJavaScriptIntersectionObserver
解析
滚动驱动动画
使用 requestAnimationFrame 将滚动位置映射为立方体的 rotateX/rotateY 角度，配合 easeInOut 缓动实现流畅的翻面效果。
主题切换
通过 data-theme 属性切换深色/浅色主题，图片也会随主题切换为对应的 dark/light 版本。
应用场景
- ▸创意作品集展示
- ▸品牌故事页
- ▸滚动交互教学案例
完整源码
← 更多效果加载源码中…
请稍候…