在 css 中，如何实现围绕一个圆心进行布局的难题？

想要利用 css 技术，实现一个标签围绕圆心呈分类摆放的布局，但又不要旋转元素。特别是在标签数量受后端控制的情况下，如何实现这一布局难题呢？

针对这一需求，我们推荐采用以下思路：

利用 css transform 属性进行旋转和位移

立即学习“前端免费学习笔记（深入）”；

我们可以利用 css 中的 transform 属性进行旋转和位移操作，从而实现围绕圆心的布局。通过提供到圆心的距离（r）和旋转角度（angle），我们可以进行以下操作：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

1. 先将元素旋转 angle 度，使其指向圆心；
2. 再沿着圆心方向位移 r 距离；
3. 最后反向旋转 angle 度，恢复元素的原始方向。

实现示例：

left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(angle) translate(r) rotate(-angle);

效果展示：

[图片：纯 css 圆形布局.png]

具体实现：

https://codepen.io/mannix-zho...