这是一款把图片沿螺旋轨道排布的 3D 画廊，零 JavaScript，完全由 CSS 三维变换与滚动驱动动画实现。48 张卡片分成两条螺旋股，像 DNA 双链一样绕着中轴向远处延伸；页面一滚，整条螺旋就朝你推进，正对镜头的那张自动放大变清晰，两侧的则半透明后退。滚动停下时画面也停住，进度完全跟手。配色克制、字体清瘦，成品感相当强。

这款 CSS 螺旋画廊的四个亮点

螺旋轨道是算出来的：每张卡片的角度与深度由公式推导，不用逐个写坐标。
当前卡片自动聚焦：越靠近镜头越清晰放大，两侧自动淡出，层次分明。
零脚本、零依赖：整个效果只有 HTML 与 CSS，接进任何框架都不冲突。
参数化程度高：螺旋半径、卡片间距、每圈数量、旋转角度都是可调变量。

纯 CSS 是怎么把图片排成螺旋的

其一，位置来自数学而非硬编码。样式表顶部先定义好螺旋半径、卡片角度间隔与纵向间距，再由这几个值推导出"每圈放几张""一圈前进多少距离"。每张卡片只需要知道自己的序号，剩下的角度和深度都能算出来——所以 48 张卡片共用同一套规则，加卡片不用改任何计算。

其二，滚动条被注册成了一个可插值的数字。整个动画的核心只有一个进度变量，它经 @property 注册为数值类型后才能被平滑过渡，再把动画时间轴绑到页面滚动上：

animation-timeline: scroll(root);

没有一个滚动监听器，性能开销和跟手程度都优于传统写法。

其三，聚焦效果是"距离"的函数。卡片会根据自己离当前进度有多远，换算出一个"当前程度"，缩放、透明度、清晰度都由它统一驱动。因此中心卡片的高亮不是某一帧的特例，而是连续变化的结果，来回滚动都不会跳变。

怎么换成自己的照片

只有 HTML 与 CSS 两个文件加一个图片目录。每张卡片就是一个 figure，里面放图片和说明文字，复制一段即可增加，删减也不影响排布——因为位置是算出来的，不是写死的。

螺旋的形态全部集中在样式表顶部：半径、卡片宽度、角度间隔、纵向间距、透视距离都有独立变量并附注释。想让螺旋更紧凑就减小角度间隔，想拉长浏览距离就调高页面的可滚动高度。

兼容提示：依赖滚动驱动动画，Chrome / Edge 115+ 与 Safari 26+ 表现完整，Firefox 需手动开启相关标志位。素材已内置检测，不支持时会给出提示，不会白屏。运行方法参见压缩包内的帮助文档。

关于这款 3D 相册特效的常见问题

图片数量可以增减吗？

可以，随意增减。卡片位置由公式推导，多一张少一张都会自动排进螺旋，不需要改任何数值。

能改成横向或反方向旋转吗？

能。旋转方向与螺旋走向由角度变量的正负决定，取反即可反向；两条螺旋股的偏移量也是独立变量，可以做出更松散或更交错的形态。

手机上性能怎么样？

三维变换对移动端有一定压力。默认已用响应式单位缩小了螺旋半径与卡片尺寸，若图片较多，建议再压缩图片体积并适当减少卡片数量。

图片说明文字能去掉吗？

可以。说明文字是卡片内的独立元素，删掉或改成任意内容都不影响螺旋布局，它的位置也由变量控制。