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>