Animation of images along a curve, looped

Hi beautiful people! :slight_smile:

I tried to implement such an animation → Floema Jewelry (hero section), but when I rotate each of the images, and then the X-Y animation does not allow me to spin the images. Any thoughts on how to implement something like such a simple animation?

I would be grateful for any advice friends! Thanks :3

<style>
@keyframes drawArc {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
    100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg);  }
}
@-webkit-keyframes drawArc {
    0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
    100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg);  }
}


body{
    padding: 150px;    
    background: black;
}

.test {
    animation: drawArc 3s linear infinite;
    -webkit-animation: drawArc 3s linear infinite;
}
</style>

I managed to twist one element in an arc, but a few do not work, they begin to move in chaos