CSS围绕圆心自适应布局

1.将所有要分散在圆心周围的元素的起始位置统一在圆心处(圆心位置根据实际情况)：

{{item.name}}

.computer {

position:absolute;

top -30px

left -60px

width 120px

height 70px

}

2.css原理： 使用 transform 属性，rotate作旋转+translateY作位移+rotate反向旋转（负的） 如：

transform: rotate(90deg) translateY(280px) rotate(-90deg) // 其中90为旋转度数，280为半径距离

3.根据后台返回是数据，计算旋转角度：360/要布局的元素个数

async getComputerList () {

const res = await $axios.get('/XXX')

if (res.success) {

this.computerList = res.data

if (!this.computerList || this.computerList.length === 0) {

return

}

// 设置每个点的位置

this.currRot = 360 / this.computerList.length

this.computerList.forEach((item, index) => {

this.$set(item, 'rot', this.currRot * (index + 1))

})

}

},

4.将每个元素自己的旋转角度动态绑定

{{item.name}}

原文参考：https://segmentfault.com/q/1010000042302059?utm_source=sf-similar-question

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：