(upbeat music) Welcome back to KnowledgeCity's course on Cascading Style Sheets. I'm Cliff Brozo, I'm your instructor. And today we're going to look at formatting a cube timer. In a previous lesson, we had a timer that kept track of how much time each player wound up taking to answer each clue. In addition, we want to have a timer that times the entire process so that the user will know how much time they spent on the entire game. Our game timer will be in the form of a cube and it will keep track of the minutes, seconds and even hours that the user takes to complete the game. The cube will feature a rotation so that if we hover over it, it will spin, giving it a fancy look. We'll learn about the fact that we need three faces, one for the hours, one for the minutes and one for the seconds. And as the cube sits and counts, it will also be changing colors. Let's take a look at the code. In looking at our development platform of Atom, we notice that beginning on line 22, and continuing through line 27, we have a SPAN called item2, which is going to place the grid timer in the second item in the grid. Let's take a look at what that looks like. This would be the class for item1. This is the class for item2. As you can see, the figure has three different classes because each of the items are formatted separately. So we have a top, which keeps track of the seconds. The right side, which keeps track of the minutes and the left side, which keeps track of the hours. Those items have IDs of seconds, minutes and hours. I also wanna draw your attention to this line here, number 34, which has a value of hms, the hours, minutes, seconds and a class of hideme and I wanna show you what happens when I delete that class. And restart the game. (lively music) And this is a way for me to put a phone field into the game board that the users do not see. All it's doing is taking the input from the cube timer and placing it into the form field so that when the user submits the game, I will know exactly how long it took them to complete the game. Now, I don't need that to be shown and that's why I have the class of hideme, I'll put that back, in line 34, which hides that particular area. So the user cannot see that it's there. We'll see how that item is hidden in just a second. So that's the HTML that we're going to look at. Let's take a look at the CSS. Beginning in line 45, we have the hideme class, which sets the opacity to zero, effectively rendering the item here for hours, minutes and seconds invisible. I have a font face for my entire board. Again, I'm using the Jeopardy font and weights and styles of bold and normal. The figure deals with the actual cube and how the each part of the cube is made up is what we're going to look at. The width of 50 pixels controls each width of each side of the cube. The same thing with the height. So each one of these numbers, the zero, the one, the 51, 52 is actually a square that makes up well, three parts of the cube. We can never see the back and in fact, the back doesn't really exist. The illusion that this is a cube is there because of the way these are rotated. I put this in relative position so that it's going to sit inside that grid spot. I set a margin of 15% just to give myself some space against the wall. I set my original color to DodgerBlue, however, that's going to be changing. As you see, the colors are rotating. They're going from yellow to green to blue and we'll see how that happens in a minute. It's hard to see the text shadow of five pixels but there really is one and if you see around the number, it's mostly visible when the numbers get lighter, there's a little bit of a glow. That glow comes from the text shadow. My animation takes 10 seconds to happen but it's infinite, so it goes on and on and on. We'll see that in a second. The line height of 45 pixels will center the number on the face of the cube. And instead of having it down at the bottom of the cube or up at the top, it puts it right in the middle. In order to animate this cube in a three-dimensional way, I need to preserve my 3D setup and what I'm doing is I'm rotating the x and y-axes. And when I hover, I rotate them even more. So right now, the cube is rotated on the horizontal axis 35 degrees and 45 degrees on the y-axis and that's why it gives you the illusion of the top face or tilting towards us. When I hover over the cube, the rotation changes and the cube spins towards me. I can play with these numbers and have it rotate as much or as little as I want. And I've set a transition time of two seconds to make that rotation. So when I hover over the cube, it takes two seconds for it to complete the rotation forward and two seconds to complete the rotation backwards. That's where the hover figure comes in.
