如何利用 CSS 实现围绕圆心进行分类摆放的布局?

如何利用 CSS 实现围绕圆心进行分类摆放的布局?

通过 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 属性以实现所需的布局。

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容