Puedes posicionar las imágenes usando las ecuaciones polares de una circunferencia y hacer la animación aumentando el ángulo cada cierto tiempo.
Dependiendo de la velocidad a la que quieres que rote puedes cambiar la variable angulo
o el tiempo en el que quieres que se actualice con el setInterval
. Dependiendo del número de imágenes que tengas y su separación modifica n
y r
.
Te adjunto un ejemplo que puedes ejecutar:
const circles = document.querySelectorAll('.element')
const n = 6; // numero de circulos
const r = 120 // radio
let angulo = 0;
let originX = circles[0].offsetLeft
let originY = circles[0].offsetTop
setInterval(() => {
angulo += 0.01
circles.forEach((element,i) =>{
element.style.left = `${originX + r*Math.cos(angulo + 2*Math.PI/n*i)}px`
element.style.top = `${originY + r*Math.sin(angulo + 2*Math.PI/n*i)}px`})
},20)
.element{
position: absolute;
width: 100px;
height: 100px;
border-radius:50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
#circle{
position: relative;
width: 400px;
height:340px;
margin: auto;
}
<div id="circle">
<div class='element' style="background:red"></div>
<div class='element' style="background:green"></div>
<div class='element' style="background:yellow"></div>
<div class='element' style="background:orange"></div>
<div class='element' style="background:blue"></div>
<div class='element' style="background:salmon"></div>
</div>