Pure-CSS flip-clock animation

Simple “mechanical flip clock” style counter using pure CSS animations, with gratuitous box-shadow gradients:

How it works: there is an element per each possible digit, and its ::before and ::after pseudo-elements render the top and bottom halves of the “flip card”, appropriately. Keyframed animation is set up to apply rotation transform in 3D space, at each digit’s appropriate timing cue.

There were some z-fighting issues (the wrong half would be drawn on top of another), so I added a z-index flip, right in the middle of the rotation of a digit’s half. The midpoint of a rotation is actually a bit after half-time due to easing, so there is a manually-tweaked constant to adjust that.

Thanks to Andre @ Myplanet for the initial idea prompt!