Rotate animation on point inside the element

Question

I have an element with a width of 4px and a height of 54px, how do I get it to rotate 2px from the bottom and 2px from the left, inside of the element (kinda like a pointer spinning in the center of a circle)

Answer 1

Use( transform-origin:50% 4%; ) in CSS to change the point of rotation at which transform:rotate(); works , by default its value is(50% 50%) i.e. it rotates from the middle . In your case (50% 4%)as 2/4*100=50 and 2/54*100=4 average.

Answer 2

Try this out...
https://code.sololearn.com/WWXlE7Z9A7aq/?ref=app