This is an alternative solution to creating easy-to-rotate clock hands.
The hand is now placed directly at the intended position for rotation by using percentage values in top and left for indicating position: absolute; taking into account the descriptions of its width and height. The hand origin is then transformed as appropriate for the width and height descriptions now used. Please view the source code which has comments explaining how values are arrived at. This method is a bit more tedious with respect to calculations. However, since this avoids any transform: translate(); applied to the hand, the hand can be directly rotated without simultaneous translation. It also reduces the need for a <div> element to contain each hand. Just another way to do it.
Hover over white clock outline to see the result.
This is an alternative solution to creating easy-to-rotate clock hands.
The hand is now placed directly at the intended position for rotation by using percentage values in
topandleftfor indicatingposition: absolute;taking into account the descriptions of itswidthandheight. The hand origin is then transformed as appropriate for thewidthandheightdescriptions now used. Please view the source code which has comments explaining how values are arrived at. This method is a bit more tedious with respect to calculations. However, since this avoids anytransform: translate();applied to the hand, the hand can be directly rotated without simultaneous translation. It also reduces the need for a <div> element to contain each hand. Just another way to do it.Hover over white clock outline to see the result.