Question

Jsfiddle: http://jsfiddle.net/yJJs7/

Javascript:

function main(){
    var centerx=250;
    var centery=250;
    var degrees=0;
    var div=document.getElementById('test');
    var move=function(){    
        if(degrees>360)degrees=degrees%360;
        var radians = degrees*Math.PI/180;
        var newx = Math.cos(radians)*100;
        var newy = Math.sin(radians)*100;
        div.style.top=(newy+centery)+'px';
        div.style.left=(newx+centerx)+'px';
        degrees+=10;   
    };
    setInterval(move,50);
    console.log(div);
}
main();

HTML:

<div id="test"></div>
<div id="test2"></div>

CSS:

#test{
    height:100px;
    width:100px;
    background:black;
    border-radius:100px;
    position:fixed;
}
#test2{
    position:fixed;
    height:30px;
    width:30px;
    background:black;
    border-radius:30px;
    position:fixed;
    top:250px;
    left:250px;
}

​

The second div is centered at 250×250 px, and the first div should rotate around it. Why isn’t it?

​

Answer 1

Your equation is calculating the new position for the centre of the circle, but style.top/style.left goes from the top/left-most points on the circle, you need to subtract the radius:

div.style.top=(ny+cy-35)+'px';
div.style.left=(nx+cx-35)+'px';

http://jsfiddle.net/yJJs7/1/

---

That will be rotating around the centre of the small circle (265, 265) rather than (250, 250) though, so you probably want to offset the small circle in the css:

#test2{
    ...
    top:235px;
    left:235px;
}

div.style.top=(ny+cy-50)+'px';
div.style.left=(nx+cx-50)+'px';

http://jsfiddle.net/yJJs7/7/