通过 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>
登录后复制
效果如下图所示：
[图片]
此方法对于通过后端传递标签列表来进行布局非常适用。我们可以动态地计算每个标签的 angle 和 r 值，然后将其应用于 CSS transform 属性以实现所需的布局。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容