Pure CSS3 iPad Clock
This is an iPad clock rendered purely in CSS3 without the use of any image. The correct time can be set by using JS but for the sake of pure CSS-ness, it was avoided for this creation. So here, three hands are drawn and then with the help of animation
property, these hands are rotated from 0deg
to 360deg
with varying animation-duration
to replicate the real clock.
Various other CSS properties are used here to draw the whole clock but you must notice that each divider is created using a different span
element which is rotated using transform
s and placed accordingly.