div元素呈圆环排列

<style>

.path {

width: 300px;

height: 300px;

padding: 20px;

border-radius: 50%;

background: rgba(79, 11, 152, 0.5);;

margin: 50px auto;

}

.avatar {

width: 50px;

margin: 0 auto;

border-radius: 50%;

overflow: hidden;

display: block;

transform-origin:50% 150px;

    position: absolute;

}

</style>

    <div class="avatar" style="transform: rotate(0deg);">

        <img  src="https://www.baidu.com/img/bd_logo1.png" width='50' height='50' style='transform: rotate(0deg);'/>

    </div>

    <div class="avatar" style="transform: rotate(72deg);">

        <img  src="https://www.baidu.com/img/bd_logo1.png" width='50' height='50' style='transform: rotate(-72deg);'/>

    </div>

    <div class="avatar" style="transform: rotate(144deg);">

        <img  src="https://www.baidu.com/img/bd_logo1.png" width='50' height='50' style='transform: rotate(-144deg);'/>

    </div>

    <div class="avatar" style="transform: rotate(216deg);">

        <img  src="https://www.baidu.com/img/bd_logo1.png" width='50' height='50' style='transform: rotate(-216deg);'/>

    </div>

    <div class="avatar" style="transform: rotate(288deg);">

        <img  src="https://www.baidu.com/img/bd_logo1.png" width='50' height='50' style='transform: rotate(-288deg);'/>

    </div>