Use CSS to move clock hands

- [Instructor] In the exercise files for this movie, 06_02, you'll find the starting point for our analog clock. If you look at the markup you'll see in index dot HTML we have just a container called clock box and inside sits an inline svg. I've marked up this svg so it's easy to understand what each of the pieces are. Here we have three graphs. So this is the face, that is the circle around the clock and the hour marks. Then we have the hour hand, the minute hand and the second hand.

And we're going to target these using the id's later. Inside each of these graphic components we have svg markup for different things. So here I can see inside the face we have the circle, we have the hour marks and then we have the mid circle that is in the center. For the hour we have the hour arm and a sizing box. For the minute we have the minute arm and a sizing box. And for the seconds we have a second arm and a sizing box. Looking at the CSS it is about as sparse as can be. We center the content using flex and the main element and the clock box container.

Then I have specific styling for each of the elements within the svg. So here we have the circle. You can see the stroke is set to black, the stroke width is nine and the stroke miter limit is 10. You can mess around with these values and see how it changes the graphic later. The mid circle is a little dot in the center of the clock. It is just black. Then we have the hour marks which are the ticks around the clock face. Again, they're black and we have a width. Then we have the hour arm, the minute arm and the second arm. And here you see the hour arm is the thickest.

Then the minute arm is not as thick and then the second arm is very thin. Finally, there's this element, the sizing box. The sizing box is just used to center the arms so they rotate correctly around the same axis. So you shouldn't do anything to that. If you try to put a fill color on it you'll see the entire clock face will change color. So just ignore that part. And at the very bottom we have a grouped styling that applies to all three of the arms. Here we have transform origin 300 by 300. This just centers the transforms around the center of the graphic.

And then we have transition that transitions how the arms move. This is what your clock face currently looks like. This is a layered svg and you can scale it to any size in the browser. We can also manipulate all the different elements here using CSS. So, if I inspect any element within here. You see here we have the svg. Then we can burrow down into, say, the clock face. Here we have the circle element. If we change the color here to red we see the circle turns red.

If you change the stroke width we can make it thicker or thinner. And basically we can just mess around with this to make it look pretty much like anything we want. Our main task in this example project is to get the hour, minute and second arms to move around the circle to actually show the current time. And we're going to do that using the transform property in CSS. So if we look in here you see we have hour, minute and second as id's.

And I can create rules for each of these. So let's say I want to move just the minute arm. I can say minute. Then put in transform rotate and then parenthesis. Then the number of degrees, so maybe 15 degrees. And here you see the arm moves. Now you can go in and change the value and you see the clock arm rotates for me. And this is what we're going to do using JavaScript.

Apply the transform property as an inline CSS style.