Hand translated to intended position for rotation. Hand origin transformed to coincide with intended point of rotation (actually unnecessary for the way we will now rotate the hand). However, now we will rotate the <div> which contains the hand and so we don't need to worry about translation during animation since we created a hand-containing <div> whose center is coincident with the clock without the need for translation or origin transform. So the hand will apparently rotate about its new origin, but in fact we are rotating its containing <div> with the clock hand correctly placed so that our intended origin is coincident with the clock center. Hover over white clock outline to see what happens. This was the method used to rotate the clock hands in the finished product.
Hand translated to intended position for rotation. Hand origin transformed to coincide with intended point of rotation (actually unnecessary for the way we will now rotate the hand). However, now we will rotate the <div> which contains the hand and so we don't need to worry about translation during animation since we created a hand-containing <div> whose center is coincident with the clock without the need for translation or origin transform. So the hand will apparently rotate about its new origin, but in fact we are rotating its containing <div> with the clock hand correctly placed so that our intended origin is coincident with the clock center. Hover over white clock outline to see what happens. This was the method used to rotate the clock hands in the finished product.