用 transform: rotate() + translate() 组合实现：子元素设 position: absolute、top: 50%; left: 50%，再通过 transform: translate(-50%, -50%) rotate(θdeg) translate(r, 0) 定位到圆周，θ = 360° ÷ 总数 × 索引，r 推荐用 px/rem。
怎么用 CSS 把元素摆成一圈圆形？
靠 transform: rotate() + translate() 组合最稳，不是靠 border-radius 或伪 3D。圆心是父容器中心，每个子元素先平移到圆心，再绕 Z 轴旋转指定角度，最后沿 X 轴平移半径距离——这样所有元素就自然落在圆周上了。
常见错误是直接对子元素设 top/left 百分比或固定值，结果只能硬凑几个点，加个元素就全乱；或者误用 rotate() 单独旋转元素本身，没动位置，只是转了个方向。
- 父容器必须设
position: relative，否则绝对定位会脱出上下文 - 每个子元素设
position: absolute，且初始top: 50%; left: 50%对齐圆心 - 用
transform: translate(-50%, -50%) rotate(θdeg) translate(r, 0)，注意顺序不能错：先居中，再旋转，最后横向移出半径 - 角度 θ = 360° ÷ 元素总数 × 索引（从 0 开始），比如 6 个元素，第 2 个（索引 1）就是
rotate(60deg)
CSS 里怎么动态算角度和坐标？
纯 CSS 没循环、没变量计算，所以角度和偏移量得手写或靠 JS 注入。CSS 自定义属性（--angle、--radius）可以配合 calc() 做部分推导，但最终每个元素的 transform 还是得单独设——别指望一个 :nth-child() 规则自动算出全部角度。
容易踩的坑：用 calc(360deg / var(--count) * (n - 1)) 这类写法时，n 不是变量，:nth-child(n) 的 n 是选择器逻辑，不能参与 calc 运算。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：JS 遍历子元素，按索引算
rotate()值，写进style属性或 class - 如果坚持纯 CSS，就老老实实写 6 个规则：
:nth-child(1) { transform: ... rotate(0deg) ...; }、:nth-child(2) { transform: ... rotate(60deg) ...; } -
translate(r, 0)中的r单位建议用px或rem，避免用%——百分比是相对于自身尺寸，不是父容器，会歪
为什么用 transform 而不是 top/left 算坐标？
因为 top/left 要手动解三角函数：left = cx + r × cos(θ)，而 cos/sin 在 CSS 里没法算；transform 的 rotate + translate 是浏览器原生支持的合成变换，不触发重排，性能好，也更易维护。
另一个现实问题：用 top/left 写死坐标后，一旦圆半径或元素数量变，所有值都得重算；而 transform 方案只改角度和半径两个参数，结构不变。
- 用
top/left容易忽略元素自身的宽高，导致视觉中心不对齐圆周点 -
transform: translate(-50%, -50%)天然把元素锚点拉到中心，和旋转轴一致 - 动画场景下，
transform可硬件加速，top/left触发 layout，卡顿明显
IE 和旧版 Safari 支持要注意什么？
transform 的多段组合（如 rotate() translate()）在 IE10+ 和 Safari 9+ 没问题，但 IE9 只支持单个变换函数，写成 transform: rotate(30deg) translateX(100px) 会失效；Safari 8 及更早需加 -webkit- 前缀，且不支持空格分隔的多个函数，得用逗号拼接：-webkit-transform: rotate(30deg), translateX(100px)。
真正麻烦的是角度计算逻辑——如果靠 JS 动态生成样式，IE9 不支持 getComputedStyle 读取 transform，但这里我们只写不读，影响不大；重点是别在 CSS 里用 calc() 套复杂表达式，IE9 完全不认。
- 兼容 IE9：拆成两个独立
transform声明（不推荐，无效），或退回到 JS 计算top/left（可行但麻烦） - 移动端 iOS Safari 低于 12.2 时，
translate(r, 0)若r是小数，可能有 1px 抖动，建议r取整 - 所有现代浏览器都支持
transform-origin: 50% 50%，但别设成center center——部分旧引擎不识别
实际做一圈 8 个图标时，圆心偏移、元素尺寸差异、字体抗锯齿都会让“正圆”看起来有点松散。这时候与其调角度，不如微调每个元素的 transform: translate(-50%, -50%) rotate(...) translate(...) 最后一段距离，手动补 1–2px 更靠谱。
