这是一款完全用 CSS 3D 变换搭出来的图片圆环特效：六张 16:9 的图片沿着一个透明圆环等分排布，绕着中央的「大标题」缓慢自转 45 秒一圈，视觉像一枚立体的胶片盘。整段特效没有 JavaScript，全部靠 `transform-style: preserve-3d`、`perspective` 和 `@property` 注册的自定义角度属性驱动。字体使用 Google Fonts 的 Cherry Bomb One，配合黄色填色、白色描边和橙色偏移阴影，做出贴纸般的糖果感。
这款 3D 圆环轮播的四个亮点
圆环角度用 `@property --spin` 注册，CSS 就能像补间数字一样在关键帧里对角度做线性插值，浏览器直接跑动画，无需 JS 也无需 requestAnimationFrame。
每张图的位置只用一个变量 `--i` 决定：`rotateY(calc(var(--i) * var(--slide-deg))) translateX(var(--img-translate-x)) rotateY(90deg)`，把「先绕轴转到自己那一格→向外推→再回正让图片正面朝外」三步串成一个 transform 链。
圆环倾角固定 `rotateX(-20deg) rotateZ(30deg)`，圆盘不是水平的而是微微向观察者侧倾，配合 1200px 的 `perspective`，近处的图会明显放大、远处会缩小，透视感自然。
响应式做得干脆：`@media (max-width: 768px)` 直接把 `--width` 从 100px 改成 70px、`--img-translate-x` 从 120% 调到 110%，整个圆环等比缩小，标题也从 100px 降到 50px，手机上仍是完整的立体圆环而不是被裁掉。
preserve-3d 与 @property 在这套特效里到底做了什么
其一，`transform-style: preserve-3d` 必须同时挂在包裹层 `.wrapper` 和 `.ring` 上，任何一层丢掉子元素就会被 flatten，圆环立刻塌成平面重叠。这也是很多人抄回去只看到一堆重叠图片的根本原因。其二，`@property --spin` 是 Houdini 里少见能落地到生产的一部分——不注册就只能在 keyframes 里对完整 `transform` 做插值，注册之后可以只对角度做插值，图片的位置公式保持不动，代码结构非常干净。其三，图片的 `translateX(var(--img-translate-x))` 用的是百分比而非固定像素，意味着圆环半径跟着 `--width` 走，改一个变量就能整体缩放，源码中均有注释。
怎么改成自己想要的圆环规模和主题
要换图片，把 `.ring` 里的六个 `` 换成自己的 URL 即可，注意保持 `--i: 0` 到 `--i: 5` 的递增。要改数量，`--total: 6` 同步改成新数量，其他都不用动。想让圆环转得快一点或反向，改 `animation: spin 45s linear both infinite` 的 45s，或把 `--spin` 目标值从 360deg 改成 -360deg。字体颜色和阴影集中在 `.title` 规则里（约第 21 行），换个 `color` 和 `filter: drop-shadow(...)` 就能整体换调。
浏览器兼容性：`@property` 需要 Chrome 85+、Safari 16.4+、Firefox 128+；`text-box: trim-start cap alphabetic` 属较新特性，Safari 17+/Chrome 133+ 才支持，不支持的浏览器只是标题上下多一点点内边距，不影响主体。详细运行方法请参见压缩包内的帮助文档。
常见问题
可以换成 8 张或 12 张图片吗
可以，只要把 `--total` 改成新的数量、并在 `.ring` 里补足对应数量的 `` 并递增 `--i`，圆环会自动均分角度，其他参数不用改。
手机上圆环会不会太小
不会。768px 断点下 `--width` 缩到 70px、`--img-translate-x` 调到 110%，整体是等比缩放，圆环依然完整可见，只是尺寸变小以适应窄屏。
中间的文字能改成中文或 Logo 图片吗
能。`.title` 是普通元素，替换 innerText 或直接换成 `` 都行；如果换成中文，记得在 `font-family` 里把 Cherry Bomb One 后面补上 "PingFang SC", "Microsoft YaHei" 中文回退。
为什么我复制到项目里图片没绕圈而是重叠在一起
大概率漏了 `.wrapper` 或 `.ring` 上的 `transform-style: preserve-3d`；也可能是父层设了 `overflow: hidden` 或 `filter/mask`，浏览器会强制把 3D 上下文压平，检查一下父级样式即可。
适合放在哪些页面
适合个人作品集首页、旅拍/摄影主题的 Banner、电商夏季促销页、活动倒计时页的装饰位，以及任何想要一段轻量、无脚本、无外部依赖的 3D 亮点动画的场合。下载完整源码即可直接放进任何 HTML/Vue/React 页面使用。
