安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
滚动翻转 3D 立方体画廊 — 六面切换背景同步变化,CSS 3D 实现
编号:滚动翻转轮播

滚动翻转 3D 立方体画廊 — 六面切换背景同步变化,CSS 3D 实现

大小 29 KB
总文件 5 个
发布 2026-08-09
更新 2026-08-09
架构 CSS+JS
分类 前端资源 - 切换与轮播
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款滚动翻转立方体效果,用纯 CSS 3D + 原生 JS 实现,配合 Lenis 做平滑滚动。屏幕中央是一个立方体,六个面各贴一张摄影作品。往下滚,立方体就依次翻到下一面,转到哪一面,整个页面背景就同步换成那张图的放大模糊版,前景清晰、背景朦胧,色调始终一致,看着很整。

    图片按作者分成七组,一组六张对应六个面,转完一圈自动换下一组,所以一直滚都有新内容。左下角实时显示当前作品的标题和摄影师署名,跟着面一起变。它还做了预加载,下一张图提前load好,翻面时不会出现白块。

    用 Lenis 接管滚动之后,滚轮和触控板的手感明显比原生顺,立方体转动跟手且有缓冲,不会一顿一顿的。

    要注意图片全部来自外部图床,自己用记得换成本地素材。

    适合摄影师作品集、品牌视觉展示、产品多角度介绍、展览和活动页首屏。

模板目录结构

    最新资源

    咖啡馆与餐饮品牌 HTML 响应式网站模板

    布润

    咖啡馆与餐饮品牌 HTML 响应式网站模板
    餐厅与餐饮品牌 HTML 响应式网站模板

    味澜

    餐厅与餐饮品牌 HTML 响应式网站模板
    建筑施工与工程服务 HTML 响应式网站模板

    筑衡

    建筑施工与工程服务 HTML 响应式网站模板
    AI 人工智能与技术服务 HTML 响应式网站模板

    博思科技

    AI 人工智能与技术服务 HTML 响应式网站模板
    Three.js照片胶带,拖拽展开与卷轴回收交互特效

    卷轴相册

    Three.js照片胶带,拖拽展开与卷轴回收交互特效
    虚拟货币数字资产与质押管理 HTML 移动端界面模板

    押智台

    虚拟货币数字资产与质押管理 HTML 移动端界面模板