Prevent an element to rotate itself in a circular CSS3 animation

Question

Ok so this is really getting frustrated for me here, first of all if my question framing is wrong please do edit it(if you think so)...and ok, as my screens will explain you

Answer 1

Position it absolutely, don't change the transform-origin, leave it at 50% 50%.

Then simply rotate the element, translate it by the value of the radius and then cancel the first rotation - you can see how chaining transforms works here.

@keyframes rot {
  0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(150px) rotate(-360deg); }
}

demo