I decided to try creating an analog 12 hour clock with some basic CSS features. I start by creating a square div of 500px. Then I set the border radius to 250px and get a nice circle. After that, I add twelve checkmarks, set their absolute and get the corresponding positions.
The angle for each checkmark is based on this (apologies for the simple wording of simple mathematics):
- 12 checkmarks
- 360 ° in our circle
- 360/12 = 30 ° angles
The position for each elevation can be calculated using some basic trigonometry. I know θ (0 °, 30 °, 60 °, etc.) And the radius (250), and using cos and sin , I can determine the corresponding upper, lower, left and right values. To get the left or right value (x), I can simply use: r * sin θ . To get the upper or lower value (y), I can use: r - (r * cos θ) . Hope the image below (excuse the lack of mastery of MS Paint) may help clarify what I'm trying to do.
Once I have these equations, it becomes much easier to get the corresponding x and y values:
θ (angle) | 250 * sin θ [x] | 250 - (250 * cos θ) [y] -------------------------------------------------------------- 30° (1:00) | right: 125px | top: 33.5px 60° (2:00) | right: 33.5px | top: 125px 90° (3:00) | right: 0px | top: 250px 120° (4:00) | right: 33.5px | bottom: 125px 150° (5:00) | right: 125px | bottom: 33.5px 180° (6:00) | right: 250px | bottom: 0px 210° (7:00) | left: 125px | bottom: 33.5px 240° (8:00) | left: 33.5px | bottom: 125px 270° (9:00) | left: 0px | bottom: 250px 300° (10:00) | left: 33.5px | top: 125px 330° (11:00) | left: 125px | top: 33.5px 360° (12:00) | left: 250px | top: 0px
Now that I have been pulling the question for too long ... my question is, why will all my marks on 2, 3, 4, 8, 9 and 10 be turned off a little? Based on my calculations (I always wanted to say this), I should not have these problems. Of course, I made some rounding and left some whitefish, but they are not so important as to make positioning inconvenient. Here is my code:
HTML
<body> <div id="clock"> <div id="one" class="oneEleven tick"></div> <div id="two" class="twoTen tick"></div> <div id="three" class="threeNine tick"></div> <div id="four" class="fourEight tick"></div> <div id="five" class="fiveSeven tick"></div> <div id="six" class="sixTwelve tick"></div> <div id="seven" class="fiveSeven tick"></div> <div id="eight" class="fourEight tick"></div> <div id="nine" class="threeNine tick"></div> <div id="ten" class="twoTen tick"></div> <div id="eleven" class="oneEleven tick"></div> <div id="twelve" class="sixTwelve tick"></div> </div> </body>
CSS
#clock { height: 500px; width: 500px; border-radius: 50%; border: 1px solid black; position: relative; } .tick { background-color: black; height: 20px; width: 5px; position: absolute; } .oneEleven { top: 33.5px; } .twoTen { top: 125px; } .threeNine { top: 250px; } .fourEight { bottom: 125px; } .fiveSeven { bottom: 33.5px; } #one { right: 125px; transform: rotate(30deg); } #two { right: 33.5px; transform: rotate(60deg); } #three { right: 0px; transform: rotate(90deg); } #four { right: 33.5px; transform: rotate(120deg); } #five { right: 125px; transform: rotate(150deg); } #six { left: 250px; bottom: 0px; } #seven { left: 125px; transform: rotate(-150deg); } #eight { left: 33.5px; transform: rotate(-120deg); } #nine { left: 0px; transform: rotate(-90deg); } #ten { left: 33.5px; transform: rotate(-60deg); } #eleven { left: 125px; transform: rotate(-30deg); } #twelve { left: 250px; top: 0px; }
jsFiddle . This is not entirely obvious at first glance, but if you look at the marks to which I referred, you will see that they are not lined up in a circle. In the end, I will move on to percentages, but I would like to know why they are disabled, and this is the best approach to create a circle that you would like to add to the style? I understand the HTML5 canvas tag there, but I feel that it would be too difficult to work with it and would do more processing than I need to do ...
Any help would be appreciated!