look at point
trying to rotate a div element to look at (towards) a point. in this example sun.
HTML
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<small>click anywhere on balck, click and drag green</small>
<small style='color:#ac6;'>goal is to make pointy side of green should always point towards orange sun</small>
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);
$(".ciracle").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)');
sunAngle = (sunAngle+1) %360;
},100);
});
function radToDegree(rad) {
return (rad > 0 ? rad : (2*Math.PI + rad)) * 360 / (2*Math.PI)
}