3D 圆环组件（CSS 分段圆环/甜甜圈，段数/管径/半径可调）

效果演示（真实可交互）

完整代码

圆环由 N 个胶囊形分段围成：每个分段 rotateY(i × 360°/N) 展开到对应角度，再 translateZ(环半径) 推到环面上。分段宽度不是随意取值，而是用弦长公式 2 × R × sin(π/N) 计算并放大 5%，使相邻分段恰好首尾相接、不留缝隙；分段高度即管径，圆角拉满后呈现甜甜圈质感。

<div class="scene">
  <div class="tilt"><div class="torus" id="torus"></div></div>
</div>

.scene { height: 400px; perspective: 950px; display: flex; align-items: center; justify-content: center; }
.tilt { transform: rotateX(16deg); transform-style: preserve-3d; }   /* 整体俯视角 */
.torus {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotateY(360deg); } }

// N 个分段围成圆环：弦长公式保证无缝
function build(n, R, tube) {
  const angle = 360 / n;
  const chord = 2 * R * Math.sin(Math.PI / n) * 1.05;   // 弦长 × 1.05
  torus.innerHTML = '';
  for (let i = 0; i < n; i++) {
    const s = document.createElement('div');
    s.style.cssText = `position:absolute;width:${chord}px;height:${tube}px;
      margin-left:${-chord / 2}px;margin-top:${-tube / 2}px;border-radius:999px;
      background:linear-gradient(180deg,hsl(${i * 360 / n},78%,66%),hsl(${(i * 360 / n + 30) % 360},78%,52%));
      transform:rotateY(${i * angle}deg) translateZ(${R}px);`;
    torus.appendChild(s);
  }
}
build(28, 150, 36);

参数说明

兼容性与性能

• 全组件仅 N 个 div，最大 48 段时元素总量依然极小，GPU 合成无压力
• JS 只在参数变化时重建一次 DOM，运行期纯 CSS 动画，零逐帧计算
• 渐变与阴影均为静态样式，不随旋转重绘，性能稳定
• Chrome / Safari / Firefox / Edge 全支持；iOS Safari 保留 -webkit-transform-style: preserve-3d
• 段数较少时呈现「珠链」风格，段数多时呈现「圆环」风格，可当作两种视觉形态使用
• 不支持的旧浏览器中退化为彩色胶囊平铺，内容不丢失

常见问题

Q: 段与段之间出现裂缝或重叠？ 裂缝说明弦长算小了，重叠说明算大了。chord = 2R·sin(π/n) 是理论值，实际乘以 1.02-1.08 即可消除缝隙；段数越多、弦长越短，放大系数可以越小。

Q: 为什么圆环「不圆」、看起来像多边形？ 段数太少所致。12 段以下会明显看到棱角；建议 24 段以上，配合圆角拉满的胶囊造型，观感即接近光滑圆环。

Q: 想让圆环竖起来或倾斜更多角度？ 调整包裹层 .tilt 的 rotateX 即可整体改变观察角度；若需更复杂的姿态，可在 .tilt 上叠加 rotateZ。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，颜色、段数、管径均可自由定制。