🟧 J'ai créé un cube avec #react Hello les amis voici la suite !!!! Hier je vous ai expliqué comment j'ai conceptualisé l'effet des étoiles en background. Aujourd'hui c'est une autre histoire que je vais vous raconter. C'est l'histoire du cube qui vient s'ajouter à l'élément d'hier. Oui mais je n'ai pas fait seulement un cube, je le fais pivoter en fonction du scroll. (pour la rotation je l'expliquerai dans un autre post) 🟧 Dans un premier temps effectivement je suis venu créer un composant avec #react et ce composant est le cube. 🟧 J'ai donc créer un cube oui mais comment ? Alors non je ne vous donnerai pas du code mais la façon dont j'ai réfléchi à cette conception du cube. Pour le faire il faut une dose de #HTML5 et une bonne dose de #CSS. Effectivement pour faire ce cube dans mon fichier #CSS pour le cube j'ai d'abord créer un carré en définissant la largeur et la hauteur. (Je répète c'est un carré donc la largeur = la hauteur ) Oui mais là vous allez me dire si tu fais ça, il n'y a rien de cubique. Alors oui!!!!! tu as raison !!! C'est pour cela qu'en #CSS il y a le 'transform-style avec preserve-3d', cela nous permet donc de mettre le carré en3-d tout simplement. Attention à ce niveau un autre problème se pose !! Un cube se compose de combien de faces ? oui donc tu l'as compris il faut aussi définir des faces car dans un cube nous avons 6 faces. Donc j'ai créé en #CSS le selecteur face que j'ai mis en position absolute et j'y ai mis une largeur et une hauteur bien évidemment plus petites que le cube. Attention ici rien se s'affiche et c'est normal car nous ne l'avons pas défini dans notre fichier composant cube.js 🟧 Donc nous appelons ce cube puis les faces et pour mieux identifier les faces j'ai ajouter comme class les faces du cube ( front, back, left, right, top, bottom) de façon à pouvoir en #CSS leur ajouter la couleur à chaque face Ce qui fait que dans notre composant cube.js nous avons : une div avec la class cube et à l'intérieur de cette div nous avons 6 div avec pour chaque div la class face et le nom de la face. Voila le cube est créé !! Pour sa rotation rendez vous demain 😉 #HTML #CSS #react #formation #frontend #developpeurfront