Looking to rotate a div towards a point using the CSS 3 transform rotate function.
Progress so far: View code on JSFiddle
$(document).ready(function(){
var scw,sch,scx,scy;
calcCenter();
$(window).resize(function() {
calcCenter();
});
function calcCenter(){
sch = $(window).height();
scw = $(window).width();
scx = scw/2;
scy = sch/2;
$(".circle").remove();
var circle = $("<span></span>").addClass('circle').text('.');
circle.css('top',scy-50+"px");
circle.css('left',scx-50+"px");
$(document.body).append(circle);
}
function calcAngle(p1,p2){
var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
return 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,y:y},{x:scx,y:scy});
box.css('-webkit-transform','rotate('+(90+angle)*-1+'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('+(90+angle)*-1+'deg)');
}
});
});
var sunAngle = 1;
setInterval(function(){
var sun = $("span.circle")[0];
$(sun).css('-webkit-transform','rotate('+sunAngle+'deg)');
sunAngle = (sunAngle+1) %360;
},100);
});
Searching for a "lookat" function led me to something similar to a lookat matrix.