CSS Clock with Connected Hands

The idea came to me to implement a clock with connected hands, rather than the traditional arrangement having the hands pinned at the same point. It occurred to me that I could use CSS transforms and animation to move the hands. Below is a picture of a proof-of-concept that is animated using CSS. It produces neat shapes at certain times, notably equilateral triangles and zig-zags. It works in Firefox but renders more smoothly in Webkit-based browsers like Chrome and Safari.

The only Javascript that is used sets the initial position of the hands to the local time and updates the digits once a second, since that can't (yet) be done in CSS. Check out the fiddle. I'm happy with the result, and even happier that front-end development with HTML/CSS/JS allows prototypes like this to be rapidly constructed and tested.

A complication of the hands being connected is that the clock tends to drift over time proportional to the movement of the hour and minute hand, since the CSS transformation doesn't take into account the origin of the cascading frames of reference. If it were possible to set the frame of reference for rotation in CSS, this could be avoided. Perhaps in CSS version 4?