lookat final version

thanks to stephan and rhumborl http://stackoverflow.com/questions/26034105/set-css-rotation-towards-a-point

by Raja Ramesh

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

CSS

body {
    background: #000;
    overflow:hidden;
    margin:0;
    padding:0;
    font-size:12px;
    font-family: segoe ui;
}
small {
    color:#6ac;
    margin:5px;
    display:block;
}
span.box {
    position: absolute;
    top:0px;
    left:0px;
    width: 64px;
    height:64px;
    z-index:1;
    background-color: #ac6;
    color:#fff;
    border-radius:100% 100% 100% 0%;
    font-size:10px;
    font-family: segoe ui;
    -webkit-transform-origin:center center;
    transition:0.1s all;
}
span.circle {
    position: absolute;
    width: 120px;
    height:120px;
    z-index:0;
    background: #fa0;
    color:#ddd;
    border-radius: 100%;
    background-color: #fa0;
    -webkit-transform-origin:center center;
    transform-origin:center center;
}

JavaScript

$(document).ready(function () {
	    var scw, sch, scx, scy;
	    calcCenter();
	    $(window).resize(function () {
	        calcCenter();
	    });

	    function calcCenter() {
	        sch = $(window).height(); // New height
	        scw = $(window).width(); // New width
	        scx = scw / 2;
	        scy = sch / 2;

	        console.log(scx, scy);
	        $(".circle").remove();
	        var circle = $("<span></span>").addClass('circle').text('.');
	        circle.css('top', scy - 60 + "px");
	        circle.css('left', scx - 60 + "px");
	        $(document.body).append(circle);
	    }

	    function calcAngle(p1, p2) {

	        var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
	        return radToDegree(angle);
	    }



	    $(document).click(function (e) {
	        var box = $("<span></span>").addClass('box');
	        var x = e.pageX,
	            y = e.pageY;
	        box.css('top', y + "px");
	        box.css('left', x + "px");
	        $(document.body).append(box);
	        var angle = calcAngle({
	            x: x + 32,
	            y: y + 32
	        }, {
	            x: scx,
	            y: scy
	        });
	        console.log(angle);
	        box.css('-webkit-transform', 'rotate(' + (angle + 225) + 'deg)');

	        box.draggable({
	            drag: function (e) {
	                var box = $(this);
	                var x = e.pageX,
	                    y = e.pageY;
	                box.css('top', y + "px");
	                box.css('left', x + "px");
	                var angle = calcAngle({
	                    x: x,
	                    y: y
	                }, {
	                    x: scx,
	                    y: scy
	                });

	                box.css('-webkit-transform', 'rotate(' + (angle + 225) + 'deg)');


	            }
	        });
	    });

	    var sunAngle = 1;
	    setInterval(function () {
	        var sun = $("span.circle")[0];
	        $(sun).css('-webkit-transform', 'rotate(' + sunAngle + 'deg)');
	       ...