(musique entraînante) Bienvenue de nouveau au cours de KnowledgeCity sur les feuilles de style en cascade. Je suis Cliff Brozo, je suis votre instructeur. Et aujourd'hui, nous allons examiner le formatage d'un minuteur de cube. Dans une leçon précédente, nous avions une minuterie qui suivait du temps que chaque joueur a fini par prendre pour répondre à chaque indice. De plus, nous voulons avoir une minuterie qui chronomètre tout le processus pour que l'utilisateur sache combien de temps ils ont passé sur l'ensemble du jeu. Notre chronomètre de jeu sera sous la forme d'un cube et il gardera une trace des minutes, secondes et même heures que l'utilisateur prend pour terminer le jeu. Le cube comportera une rotation de sorte que si nous le survolons, il tournera, lui donnant un look chic. Nous allons apprendre que nous avons besoin de trois visages, un pour les heures, un pour les minutes et un pour les secondes. Et pendant que le cube est assis et compte, il changera également de couleur. Jetons un coup d'œil au code. En regardant notre plateforme de développement d'Atom, nous remarquons qu'à partir de la ligne 22, et en continuant par la ligne 27, nous avons un SPAN appelé item2, qui va placer la minuterie de la grille dans le deuxième élément de la grille. Jetons un coup d'œil à ce à quoi cela ressemble. Ce serait la classe pour item1. Ceci est la classe pour item2. Comme vous pouvez le voir, la figure a trois classes différentes car chacun des éléments est formaté séparément. Nous avons donc un top, qui enregistre les secondes. Le côté droit, qui garde une trace des minutes et le côté gauche, qui enregistre les heures. Ces éléments ont des ID en secondes, minutes et heures. Je veux aussi attirer ton attention à cette ligne ici, numéro 34, qui a une valeur de hms, les heures, minutes, secondes et une classe de hidème et je veux vous montrer ce qui se passe lorsque je supprime cette classe. Et redémarrez le jeu. (musique animée) Et c'est un moyen pour moi pour mettre un champ de téléphone dans le plateau de jeu que les utilisateurs ne voient pas. Tout ce qu'il fait, c'est prendre l'entrée du minuteur de cube et le placer dans le champ de formulaire de sorte que lorsque l'utilisateur soumet le jeu, Je saurai exactement combien de temps cela leur a pris pour terminer le jeu. Maintenant, je n'ai pas besoin que ça soit montré et c'est pourquoi j'ai la classe de hideme, Je vais remettre ça, à la ligne 34, qui cache cette zone particulière. Ainsi, l'utilisateur ne peut pas voir qu'il est là. Nous verrons comment cet élément est caché en une seconde. C'est donc le HTML que nous allons examiner. Jetons un coup d'œil au CSS. À partir de la ligne 45, nous avons la classe hideme, qui met l'opacité à zéro, rendre efficacement l'élément ici pendant des heures, des minutes et des secondes invisibles. J'ai un visage de police pour l'ensemble de mon tableau. Encore une fois, j'utilise la police Jeopardy et les poids et les styles audacieux et normaux. La figure concerne le cube réel et comment chaque partie du cube est constituée c'est ce que nous allons examiner. La largeur de 50 pixels contrôle chaque largeur de chaque côté du cube. La même chose avec la hauteur. Donc chacun de ces nombres, le zéro, le un, le 51, 52 est en fait un carré cela constitue bien, trois parties du cube. On ne peut jamais voir le dos et en fait, le dos n'existe pas vraiment. L'illusion que c'est un cube est là en raison de la façon dont ils sont tournés. Je mets ça en position relative de sorte qu'il va s'asseoir à l'intérieur de cet endroit de la grille. J'ai fixé une marge de 15% juste pour me donner un peu d'espace contre le mur. J'ai défini ma couleur d'origine sur DodgerBlue, cependant, cela va changer. Comme vous le voyez, les couleurs tournent. Ils vont du jaune au vert au bleu et nous verrons comment cela se passe dans une minute. Il est difficile de voir l'ombre du texte de cinq pixels mais il y en a vraiment un et si vous voyez autour du nombre, il est surtout visible lorsque les chiffres s'éclaircissent, il y a un peu de lueur. Cette lueur vient de l'ombre du texte. Mon animation prend 10 secondes pour se produire mais c'est infini, donc ça continue encore et encore. Nous verrons cela dans une seconde. La hauteur de ligne de 45 pixels centrera le nombre sur la face du cube. Et au lieu de l'avoir en bas du cube ou en haut, cela le met juste au milieu. Afin d'animer ce cube de manière tridimensionnelle, J'ai besoin de conserver ma configuration 3D et ce que je fais, c'est que je fais tourner les axes x et y. Et quand je plane, je les tourne encore plus. Alors maintenant, le cube est tourné sur l'axe horizontal 35 degrés et 45 degrés sur l'axe y et c'est pourquoi ça te donne l'illusion de la face supérieure ou inclinée vers nous. Quand je survole le cube, la rotation change et le cube tourne vers moi. Je peux jouer avec ces nombres et faites-le tourner autant ou aussi peu que je veux. Et j'ai défini un temps de transition de deux secondes pour faire cette rotation. Alors quand je survole le cube, il lui faut deux secondes pour terminer la rotation vers l'avant et deux secondes pour terminer la rotation vers l'arrière. C'est là qu'intervient la figure de survol.
