How Do I Get This Div To Rotate From One Of Its End And Not Its Center Using Atan2()

I don't want the div.stick in the code below to be rotating according to the center of the stick. Right now it looks like the rotation origin is in the center I want the rotation o

Solution 1:

The most important part is to reset the center of rotation. Add to CSS .stick

transform-origin: 50%100%;

to have the middle of the bottom as rotation center. Now you need to adapt the angle computation to be relative to this new center. Add new variables

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

and change the angle computation to

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

---

Or to not have multiple sources for the same quantity, and the center at a 9:1 split:

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