Javascript 将DIV排列成圆形，并向外旋转

基本上，我已经成功地将DIV元素布局成一个圆形，但我还没有解决如何计算旋转度的问题，因为旋转度需要使它们朝向圆的中心

$(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);
                }
            });

$（文档）.ready（函数（）{
var elems=document.getElementsByClassName（'test_box'）；
var增加=数学PI*2/元素长度；
变量x=0，y=0，角度=0；
对于（变量i=0；i

有人知道我怎么做吗

干杯-C

试试这个：

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

演示

---

我在开始处添加了90度，以确保divs的基线朝向中心，但是您可以根据需要进行调整。

注意，

rot

取决于

angle

，除了

angle

是弧度

干燥，因此从角度转换为旋转：

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

或者在设置样式时仅使用角度（但使用弧度作为单位），然后删除

rot

的声明：

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

---

太棒了，我真的需要学习关于两个角度和弧度的东西。。。有用的知识。