http://jsfiddle.net/ddGHz/1004/
//html
<div id = "anglereturn"/>
<div class="box"></div>
//js, jquery
var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];
$(document).mousemove(function(e){
var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);
box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
box.css({ 'transform': 'rotate(' + angle + 'deg)'});
$("#anglereturn").text(angle);
});
//css
.box{
background-color: black;
width: 30px;
height: 30px;
position: absolute;
left: 200px;
top: 200px;
}
This demonstration features a small rotating black box that follows the mouse pointer. An additional element displays the current angle of the object, but disappears when the mouse enters its area. How can this issue be resolved?