Smooth rotation of an object around a fixed point?

Question

css

Hello everyone,
there is a switch that points to the active area.
tell me how to smoothly move the arrow from the current position

to the far right.

By means of CSS.
Maybe someone came across.
It turns out that the upper part should not be movable, I haven’t succeeded so far, and during the transition it twitches up, and then it becomes as it should be to the right edge :( I

move it with this code:
.scale-arrow {
position: absolute;
top: 22px ;
left: 10%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(-29deg);
transform: rotate(-29deg);
}
.scale-arrow.active {
top: 22px;
left: 38%
-webkit-transform: rotate(-147deg);
transform: rotate(-147deg);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Tell me what to use, what to look for in order to move the object around a fixed point.
Thanks to all!
Have a nice day!

Answer 1

transform-origin: <x>, <y>, <z>
codepen.io/pena/pen/jqwjjq