通过 css 围绕圆心实现布局

为了实现这种围绕圆心进行分类摆放的布局，需要提供到圆心的距离 r 和旋转角度 angle。我们可以利用 CSS 中的 transform 属性进行旋转、位移和反向旋转操作：

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

通过该 CSS 代码，我们可以将元素旋转至指定角度，然后将其平移到圆心处，最后再次旋转以恢复原始方向。

如下所示：

<div class="item" style="transform: translate(-50%, -50%) rotate(60deg) translate(100px) rotate(-60deg);"></div>
<div class="item" style="transform: translate(-50%, -50%) rotate(120deg) translate(100px) rotate(-120deg);"></div>

效果如下图所示：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

[图片]

此方法对于通过后端传递标签列表来进行布局非常适用。我们可以动态地计算每个标签的 angle 和 r 值，然后将其应用于 CSS transform 属性以实现所需的布局。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！