Ajax Loader
×

Pure CSS3 Clock

A very simple clock made with just rectangles and circles. The hands are rotated using the transform: rotate(xdeg); and the @keyframes properties.
The duration of animation is set to 60 seconds, 3600 seconds and 84600 seconds for the seconds hand, minutes hand and the hours hand respectively.

Feel free to play with the code and you can also add some jQuery script to get the current time for the clock to show and the CSS will handle the rest :)

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 Clock

    CSSDeck G+