javascript - jquery - speedometer arrow imitation, rotating arrow towards mouse -


i need implement feature this: enter image description here

where arrow going around based on location of mouse: enter image description here

current code turns around arrow center. problem: arrow should going around left end:

          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)'});  });   .box{  background-image:url("wheelizate tabs - apart left_files/tick.png");      width: 200px;     height: 30px;      position: absolute;     left: 200px;     top: 200px; }    <div class="box" style="z-index:10000;margin-left: 70px;margin-top: 200px;"></div> 

jsfiddle.net/tuz4y6r4/

you need specify transform-origin : center left; box rotate left. default transform-origin center center. checkout working fiddle https://jsfiddle.net/63qxdg3b/


Comments