(Música animada) Bem-vindo de volta ao curso da KnowledgeCity em folhas de estilo em cascata. Sou Cliff Brozo, sou seu instrutor. E hoje vamos dar uma olhada na formatação de um temporizador de cubo. Em uma lição anterior, tínhamos um cronômetro que monitorava de quanto tempo cada jogador acabou levando para responder a cada pista. Além disso, queremos um cronômetro que vezes todo o processo para que o usuário saiba quanto tempo eles gastaram no jogo inteiro. Nosso cronômetro de jogo terá a forma de um cubo e manterá o controle dos minutos, segundos e até horas que o usuário leva para completar o jogo. O cubo terá uma rotação de modo que, se pairarmos sobre ele, ele vai girar, dando uma aparência sofisticada. Vamos aprender sobre o fato de que precisamos de três faces, um para as horas, um para os minutos e um para os segundos. E enquanto o cubo se senta e conta, também mudará as cores. Vamos dar uma olhada no código. Ao olhar para a nossa plataforma de desenvolvimento do Atom, notamos que começando na linha 22, e continuando pela linha 27, temos um SPAN chamado item2, que vai colocar o cronômetro da grade no segundo item da grade. Vamos dar uma olhada em como é. Esta seria a classe para o item1. Esta é a classe do item2. Como você pode ver, a figura tem três classes diferentes porque cada um dos itens é formatado separadamente. Portanto, temos um topo, que registra os segundos. O lado direito, que acompanha os minutos e o lado esquerdo, que registra as horas. Esses itens têm IDs de segundos, minutos e horas. Eu também quero chamar sua atenção a esta linha aqui, número 34, que tem um valor de hms, as horas, minutos, segundos e uma aula de hideme e quero mostrar o que acontece quando eu excluo essa classe. E reinicie o jogo. (música animada) E esta é uma forma para mim colocar um campo de telefone no tabuleiro de jogo que os usuários não veem. Tudo o que está fazendo é pegar a entrada do temporizador do cubo e colocá-lo no campo do formulário para que, quando o usuário enviar o jogo, Eu saberei exatamente quanto tempo demorou para completar o jogo. Agora, eu não preciso que isso seja mostrado e é por isso que eu tenho a classe de hideme, Vou colocar de volta, na linha 34, que esconde essa área particular. Portanto, o usuário não pode ver que está lá. Veremos como esse item está oculto em apenas um segundo. Então esse é o HTML que veremos. Vamos dar uma olhada no CSS. Começando na linha 45, nós temos a classe hideme, que define a opacidade para zero, efetivamente renderizando o item aqui por horas, minutos e segundos invisíveis. Eu tenho uma fonte para o meu quadro inteiro. Novamente, estou usando a fonte Jeopardy e pesos e estilos de negrito e normal. A figura trata do cubo real e como cada parte do cubo é composta é o que vamos olhar. A largura de 50 pixels controla cada largura de cada lado do cubo. A mesma coisa com a altura. Então, cada um desses números, o zero, o um, o 51, 52 é na verdade um quadrado isso compõe bem, três partes do cubo. Nós nunca podemos ver as costas e, de fato, a parte traseira realmente não existe. A ilusão de que este é um cubo está lá devido à maneira como eles são girados. Eu coloquei isso em posição relativa para que fique dentro desse ponto da grade. Eu defino uma margem de 15% apenas para me dar algum espaço contra a parede. Defino minha cor original como DodgerBlue, no entanto, isso vai mudar. Como você vê, as cores estão girando. Eles estão indo de amarelo para verde para azul e veremos como isso acontece em um minuto. É difícil ver a sombra do texto de cinco pixels mas realmente existe um e se você ver em torno do número, fica mais visível quando os números ficam mais claros, há um pouco de brilho. Esse brilho vem da sombra do texto. Minha animação leva 10 segundos para acontecer mas é infinito, então continua indefinidamente. Veremos isso em um segundo. A altura da linha de 45 pixels irá centralizar o número na face do cubo. E em vez de ter no fundo do cubo ou no topo, ele o coloca bem no meio. Para animar este cubo de uma forma tridimensional, Preciso preservar minha configuração 3D e o que estou fazendo é girar os eixos xey. E quando eu passo, eu os giro ainda mais. Então, agora, o cubo está girado no eixo horizontal 35 graus e 45 graus no eixo y e é por isso que te dá a ilusão da face superior ou inclinado em nossa direção. Quando eu passo o mouse sobre o cubo, a rotação muda e o cubo gira em minha direção. Eu posso brincar com esses números e fazer com que ele gire o quanto eu quiser. E eu defini um tempo de transição de dois segundos para fazer essa rotação. Então, quando eu passo o mouse sobre o cubo, leva dois segundos para completar a rotação para a frente e dois segundos para completar a rotação para trás. É aí que entra a figura flutuante.
