圆环文字定位不能直接用transform: rotate()，因其只旋转元素而不改变文档流位置，导致文字重叠于圆心；必须手动计算每个字符的left、top坐标及rotate角度，使基线沿圆周切线对齐。
圆环上文字定位为什么不能直接用 transform: rotate()
因为 transform: rotate() 只旋转元素自身，不改变其文档流位置，文字起点仍在左上角，转完还是从原点开始画——结果就是所有字叠在圆心附近，根本贴不上环。
真正要的是：每个字的基线（baseline）沿着圆周切线方向对齐，且字符中心落在指定角度对应的圆周坐标上。
- 必须手动计算每个字符的
left和top（或translateX/Y），基于圆心、半径、角度 - 每个字符需单独包裹（如
<span></span>），否则整段文字只能当一个块处理 - 角度单位统一用弧度（
Math.PI / 180 * deg），CSSrotate()接收度数，但计算坐标时用弧度更直接
如何用绝对定位 + rotate 把单个字符放到圆环指定角度
核心是两步：先用 position: absolute 把字符挪到圆周坐标，再用 transform: rotate() 调整朝向，使其“面向圆心”或“沿切线”。
常见需求是“字正立、沿圆周排布”，此时旋转角度 = 90° − 当前弧度角（避免倒置），并需设置 transform-origin: center 确保绕自身中心转。
立即学习“前端免费学习笔记（深入）”；
- 假设圆心在
50px 50px，半径40px，第i个字角度为angle = i * (360 / total) - 90（减90是为了让首字在顶部） -
left=50px + 40 * cos(angle * Math.PI / 180)，top=50px + 40 * sin(angle * Math.PI / 180) -
transform: rotate(${angle}deg)让文字“抬头”朝外；若要“低头”朝内，改用rotate(${angle + 180}deg)
/* 示例：第0个字（顶部） */
.char-0 {
position: absolute;
left: 50px;
top: 10px;
transform: rotate(0deg);
transform-origin: center;
}用 JavaScript 动态生成圆环文字时容易漏掉的三件事
纯 CSS 做不了动态角度计算，必须 JS 配合。但很多人生成完就以为完事了，结果文字错位、重叠、截断。
- 没重置
white-space: nowrap和display: inline-block—— 字符默认是 inline，受空格/换行影响，必须显式设为块级并禁止折行 - 忽略字体实际宽度：等角度分配 ≠ 等视觉间距，尤其中英文混排时，
textWidth差异大，硬分角度会挤在一起。稳妥做法是按字符数均分角度，不按像素 - 没处理容器
overflow: hidden—— 圆环常套在border-radius: 50%的容器里，但绝对定位元素会溢出，必须给父容器加overflow: hidden才能裁剪多余部分
IE 或旧版 Safari 下 rotate 失效？别碰 filter: progid:DXImageTransform
老浏览器对 transform 支持弱，但强行用 IE 滤镜（如 filter: progid:DXImageTransform）只会让文字模糊、错位、无法选中——这玩意儿压根不是为文字设计的。
真要兼容，降级方案更可靠：
- 检测
window.CSS && CSS.supports('transform', 'rotate(1deg)')，不支持则 fallback 到直线排列 + 小图标示意“环形” - 避免用
transform: rotateZ()，旧 Safari 只认rotate() - 不要依赖
getBoundingClientRect()在 layout 触发前取尺寸，务必等requestAnimationFrame或DOMContentLoaded后再算坐标
圆环文字本质是“视觉欺骗”，重点不在数学精确，而在人眼感知连贯。角度偏几度、半径差一两个像素，只要整体闭合、无明显断层，用户根本察觉不到——但基线对齐和 transform-origin 错一点，字就立刻“浮起来”或“陷进去”。
