i need implement feature this:
where arrow going around based on location of mouse:
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>
you need specify transform-origin : center left;
box
rotate left. default transform-origin
center center
. checkout working fiddle https://jsfiddle.net/63qxdg3b/
Comments
Post a Comment