CSS avanzado: temporizadores de cubo y creación de un logotipo

(música optimista) Bienvenido de nuevo al curso de KnowledgeCity en hojas de estilo en cascada. Soy Cliff Brozo, soy tu instructor. Y hoy veremos cómo formatear un temporizador de cubo. En una lección anterior, teníamos un temporizador que registraba de cuánto tiempo se tomó cada jugador para responder a cada pista. Además, queremos tener un temporizador que cronometra todo el proceso para que el usuario sepa cuánto tiempo dedicaron a todo el juego. Nuestro temporizador de juego tendrá la forma de un cubo. y hará un seguimiento de los minutos, segundos e incluso horas que el usuario toma para completar el juego. El cubo contará con una rotación de modo que si pasamos el cursor sobre él, girará, dándole un aspecto elegante. Aprenderemos sobre el hecho de que necesitamos tres caras, uno por las horas, uno por los minutos y uno para los segundos. Y mientras el cubo se sienta y cuenta, también cambiará de color. Echemos un vistazo al código. Al observar nuestra plataforma de desarrollo de Atom, notamos que a partir de la línea 22, y continuando por la línea 27, tenemos un SPAN llamado item2, que va a colocar el temporizador de cuadrícula en el segundo elemento de la cuadrícula. Echemos un vistazo a cómo se ve. Esta sería la clase para item1. Esta es la clase para item2. Como puede ver, la figura tiene tres clases diferentes. porque cada uno de los elementos se formatea por separado. Entonces tenemos un top, que registra los segundos. El lado derecho, que realiza un seguimiento de los minutos. y el lado izquierdo, que realiza un seguimiento de las horas. Esos elementos tienen ID de segundos, minutos y horas. También quiero llamar tu atención a esta línea aquí, número 34, que tiene un valor de hms, las horas, minutos, segundos y una clase de hideme y quiero mostrarte lo que sucede cuando elimino esa clase. Y reinicia el juego. (música animada) Y esta es una forma para mi poner un campo de teléfono en el tablero de juego que los usuarios no ven. Todo lo que hace es tomar la entrada del temporizador del cubo y colocándolo en el campo del formulario para que cuando el usuario envíe el juego, Sabré exactamente cuánto tiempo les tomó para completar el juego. Ahora, no necesito que se muestre y por eso tengo la clase de hideme, Lo devolveré, en la línea 34, que oculta esa área en particular. Entonces el usuario no puede ver que está ahí. Veremos cómo se oculta ese elemento en tan solo un segundo. Entonces ese es el HTML que vamos a ver. Echemos un vistazo al CSS. Comenzando en la línea 45, tenemos la clase hideme, que establece la opacidad en cero, renderizando efectivamente el elemento aquí durante horas, minutos y segundos invisibles. Tengo un tipo de letra para todo mi tablero. Nuevamente, estoy usando la fuente Jeopardy y pesos y estilos atrevidos y normales. La figura trata con el cubo real. y cómo se compone cada parte del cubo es lo que vamos a mirar. El ancho de 50 píxeles controla cada ancho de cada lado del cubo. Lo mismo con la altura. Entonces, cada uno de estos números, el cero, el uno, el 51, 52 es en realidad un cuadrado eso forma bien, tres partes del cubo. Nunca podremos ver la espalda y de hecho, la espalda no existe realmente. La ilusión de que esto es un cubo está ahí debido a la forma en que se rotan. Pongo esto en posición relativa para que se asiente dentro de ese punto de la cuadrícula. Puse un margen del 15% solo para darme un poco de espacio contra la pared. Establecí mi color original en DodgerBlue, sin embargo, eso va a cambiar. Como ves, los colores están rotando. Van de amarillo a verde a azul y veremos cómo sucede eso en un minuto. Es difícil ver la sombra del texto de cinco píxeles. pero realmente hay uno y si ves el número alrededor, es principalmente visible cuando los números se vuelven más claros, hay un poco de brillo. Ese resplandor proviene de la sombra del texto. Mi animación tarda 10 segundos en suceder pero es infinito, así que sigue y sigue y sigue. Lo veremos en un segundo. La altura de la línea de 45 píxeles centrará el número en la cara del cubo. Y en lugar de tenerlo abajo del cubo o arriba en la parte superior, lo pone justo en el medio. Para animar este cubo de forma tridimensional, Necesito conservar mi configuración 3D y lo que estoy haciendo es girar los ejes xey. Y cuando me desplazo, los giro aún más. Así que ahora mismo, el cubo está rotado. en el eje horizontal 35 grados y 45 grados en el eje y y por eso te da la ilusión de la cara superior o inclinándose hacia nosotros. Cuando me desplazo sobre el cubo, la rotación cambia y el cubo gira hacia mí. Puedo jugar con estos numeros y hacer que gire tanto o tan poco como quiera. Y establecí un tiempo de transición de dos segundos. para hacer esa rotación. Entonces, cuando me coloco sobre el cubo, tarda dos segundos en completar la rotación hacia adelante y dos segundos para completar la rotación hacia atrás. Ahí es donde entra la figura flotante.