Create Wall Clock Using CSS3


Today using CSS3 you can achieve many things in web designing. You can create many animation and transition effect using CSS3. Here In this post, I am going to show one wall clock designed by using only CSS. If you know CSS then you can easily understand this post.


Now I am going to tell you how to create wall clock using CSS3. It is very simple to create wall clock using CSS3 and you can easily understand it.

Step 1: Create HTML Document

In this step, I create HTML page for wall clock and in this HTML page I am using one main DIV and seven child DIV. Four Child DIV used for indicating the 12’o clock, 3’o clock, 6’o clock, 9’o clock and three child DIV for showing Hour, Minute and Seconds Hand.

Step 2: Create CSS Document

Now I am going to give you the CSS document for the above HTML page. This second step is very important because in this step only you are going to know how to create wall clock using CSS3.

Clock Face

Here I create circular clock face using border-radius. This is the main part of this wall clock.

Hour Points

Already you have four child DIV for indicating the hour points and for that four DIV you need to create CSS as below,

Clock Hands

You need three clock hands for denoting hour, minutes, seconds. Here I give CSS for three clock hands. For rotating three clock hands, you need to set rotation seconds in animation.

For hour 12 Hour = 43200 seconds

For minutes 1 Hour = 3600 seconds

For seconds 1 Minuet = 60 seconds

Clock Animation

Finally the Wall clock is ready and now you need to put the battery in this clock i.e. to rotate the clock hands in 360 degrees you need to use animation effect. Here I give you animation effect using CSS3 @keyframe transform property.

That’s it now you have your own CSS Wall Clock. If you have any feedback please leave your comment below.