Arrange the divs and rotate them outwards

Question

In principle, I managed to place the DIV elements in the shape of a circle, but I could not figure out how to calculate the degree of rotation so that they turned to OUTWARD from the center of the circle.

$(document).ready(function(){ var elems = document.getElementsByClassName('test_box'); var increase = Math.PI * 2 / elems.length; var x = 0, y = 0, angle = 0; for (var i = 0; i < elems.length; i++) { var elem = elems[i]; // modify to change the radius and position of a circle x = 400 * Math.cos(angle) + 700; y = 400 * Math.sin(angle) + 700; elem.style.position = 'absolute'; elem.style.left = x + 'px'; elem.style.top = y + 'px'; //need to work this part out var rot = 45; elem.style['-moz-transform'] = "rotate("+rot+"deg)"; elem.style.MozTransform = "rotate("+rot+"deg)"; elem.style['-webkit-transform'] = "rotate("+rot+"deg)"; elem.style['-o-transform'] = "rotate("+rot+"deg)"; elem.style['-ms-transform'] = "rotate("+rot+"deg)"; angle += increase; console.log(angle); } }); 

Someone should know how I can do this.

Greetings -C

Answer 1

Note that rot depends on angle , except angle is in radians.

DRY, so either convert from angle to rot:

 // The -90 (degrees) makes the text face outwards. var rot = angle * 180 / Math.PI - 90; 

Or just use the corner when setting the style (but use radians as the unit) and leave a rot declaration:

 // The -0.5*Math.PI (radians) makes the text face outwards. elem.style.MozTransform = "rotate("+(angle-0.5*Math.PI)+"rad)"; 

Answer 2

Try the following:

  var rot = 90 + (i * (360 / elems.length)); 

Demo at http://jsfiddle.net/gWZdd/

I added 90 degrees at the beginning there to provide a basic level of divs facing the center, however you can customize it to suit your needs.