jqueryの - スピードメーターの矢印模造、マウス

Question

への矢印を回転させ、私はこのような特徴を実装する必要があります。矢印は、マウスの位置に基づいて周りに起こっている

：

現在のコード中心から矢印の周りを回る。問題：矢印は左端からわずか約行くべきである：

  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/

Answer 1

あなたは左から回転するboxためtransform-origin : center left;を指定する必要があります。デフォルトでtransform-originはcenter centerです。 https://jsfiddle.net/63qxdg3b/