黑底上十一张建筑照片围成一个圆环立在场景中，正对镜头的一张最大最清晰，往两侧的依次变小、变暗、向内侧倾斜。画面左右边缘各有一个箭头，点一下整圈就平滑地转过一格。全程纯 CSS，没有一行 JavaScript——转动由两个隐藏的单选框驱动，每张图在圆环上的角度由它自己的序号算出。

没有脚本，这圈图是怎么摆的

每张图只写一个序号。标签上带 --_index 和图片路径两个变量，样式用序号除以总数得到它在圆周上的角度，增减图片只要改外层的总数。
先转再推。每张图先绕纵轴转到自己的角度，再沿自身的深度方向推出去一段，于是所有图自然落在同一个圆柱面上，并且都面朝圆心。
远近差异靠透视。容器设了一个较近的透视距离，越靠后的图被压得越小，配合一层渐暗的遮罩，纵深感不需要手动给每张图调参数。

左右按钮为什么是单选框

纯 CSS 要记住「当前转到第几格」，只能借助表单元素的选中状态。源码在两侧各放了一个同名单选框，选中哪个，就用 :has() 把整圈的旋转角改成对应方向的增量，再由过渡动画补出中间过程。这样做的取舍很清楚：省掉了脚本，但也意味着转动是一次一格的离散切换，做不了跟手拖拽；想要拖拽就必须补脚本。图片的进场顺序、悬停放大这些附加效果也全都挂在同一套变量上，不会互相打架。

能改的地方

圆环半径、每张图的宽高、透视距离都在样式顶部的变量里，半径调大图之间就更疏。换图只需改每个条目上的图片路径变量，数量变化后同步改总数即可。暗角与倒影的强度也是独立变量，去掉它们会更像常规的展示墙。

常见问题

图片叠在一起没有转开？

先检查外层上的总数是不是和实际条目数一致。另外这套写法依赖 :has() 选择器与 CSS 三角函数，需要近两年版本的 Chrome、Edge、Safari 或 Firefox。

能自动轮播吗？

可以，给圆环容器加一条匀速旋转的关键帧动画即可，但要注意它会和点击切换的过渡冲突，二选一更稳妥。

手机上能用吗？

能。点击切换在触摸屏上正常工作，样式里也写了窄屏下缩小半径的断点；只是没有滑动手势，需要滑动的话得自行补一段脚本。

适合用在哪

作品集与案例展示、产品多角度图、活动页的图片墙，以及需要「一圈内容绕着看」这种观感的模块。圆环角度推导与单选框控制的完整写法都在样式文件里，下载后可查看。