Home / Questions / 490073
Accepted
Will Diaz
Asked: 2022-03-13 07:28:47 +0800 CST 2022-03-13 07:28:47 +0800 CST

Position elements in CSS circle shape

  • 772

I am trying to position images that are in a div container in HTML so that they form a circle, something more graphic would be this:

enter image description here

I then want to be able to rotate these images with respect to the center of the div, giving the animation that they rotate around the center

javascript

1 Answers

  1. Best Answer

    You can position the images using the polar equations of a circumference and make the animation by increasing the angle every so often.

    Depending on the speed at which you want it to rotate you can change the variable anguloor the time you want it to update with the setInterval. Depending on the number of images you have and their separation modifies nand r.

    Here is an example that you can run:

    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>

    • 2