Javascript 如何使用atan2（）使该div从其一端旋转而不是从其中心旋转

我不希望下面代码中的

div.stick

根据斗杆的中心旋转。现在看起来旋转原点在中心，我希望旋转原点在底部。当鼠标移动以及鼠标与斗杆顶部对齐时，斗杆应旋转。它应该看起来像（旋转原点在底部）

Javascript:

var stick = $(".stick"), sHeight = stick.outerHeight(), 
                           sWidth = stick.outerWidth(), atan,
                           sTop = stick.offset().top, sLeft = stick.offset().left,
                           middle = sTop + sHeight / 2,
                           bottom = sTop + sHeight;
                           console.log(sTop, " ", sLeft)
       $(document).on("mousemove", function(e){
           atan = Math.atan2(e.pageY - 200, e.pageX - 250 ) + Math.PI/ 2 ;
            $(".display").html("atan" + atan)

           stick.css({"transform" : "rotate("  + atan + "rad)"} )


       })

HTML:

---

最重要的部分是重置旋转中心。添加到CSS

。粘贴

transform-origin: 50% 100%;

以底部的中间作为旋转中心。现在，您需要调整角度计算，使其相对于新中心。添加新变量

var sRotMidX = sLeft+sWidth/2, sRotMidY=sTop+sHeight;

并将角度计算更改为

atan = Math.atan2(e.pageY - sRotMidY , e.pageX - sRotMidX) + Math.PI/2;


或者对于同一数量不具有多个来源，且中心以9:1的比例分割：

var fmidX =.5, fmidY=.9;
stick.css({"transform-origin" : (100*fmidX)+"% "+(100*fmidY)+"%"});
var sRotMidX = sLeft+sWidth*fmidX, sRotMidY=sTop+sHeight*fmidY;

atan = Math.atan2(e.pageY - sRotMidY , e.pageX - sRotMidX) + Math.PI/2;

var fmidX =.5, fmidY=.9;
stick.css({"transform-origin" : (100*fmidX)+"% "+(100*fmidY)+"%"});
var sRotMidX = sLeft+sWidth*fmidX, sRotMidY=sTop+sHeight*fmidY;