.circle-container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 50%;
animation: rotate 10s linear infinite;
}
.circle-item {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px;
border-radius: 50%;
animation: rotate 10s linear infinite;
transform-origin: -150px;
}
.circle-item img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.circle-item:nth-child(1) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(2) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(3) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(4) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(5) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(6) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(7) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-item:nth-child(8) { transform: rotate(calc(45deg * var(--i))) translateX(150px) rotate(calc(-45deg * var(--i))); }
.circle-center {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px;
}
.circle-center img {
width: 100%;
height: 100%;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}