Ajax Loader
×

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 transforms and placed accordingly.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 iPad Clock

    CSSDeck G+