Roll Dice Project using CSS & JavaScript

Hey guys 😁 We have an unbelievable JavaScript tutorial again. I have to say that CSS is also used a lot in this Roll Dice Project and by watching this video, you finally learn how CSS 3D design and Neu Morphism work. Don't forget to give a thumbs up and subscribe to my channel for more unseen videos 😎

📂 Assets

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 What are we gonna design ?!
00:42 Dice elements
01:04 General Styles
01:38 Dice styles
09:26 Adding Roll Button
09:51 Container styles
10:35 Roll Button styles
11:41 Rolling Animation
12:28 Starting JavaScript
12:51 Making Random Dice
13:45 Rolling the dice
15:52 Making it go smooth
16:18 Final Result

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein

[CodeWithHossein]

Took some hours to be done, but it looks amazing now 🍻

[paulthomas]

Great project -using lots of interesting techniques. Thanks so much :)

[shortyshorty]

An awesome tutorial. More of this please. 🙂

[GetRealwithMike]

We need a 20 sided dice video! Please make it. One that works on HTML 5 websites.

[polskamacius]

How can I make the dice roll only once and then stop?

[h.symphony]

Could your next video share the extension you're using? That's very helpful for newbies, thanks

[jeremypruitt]

Why does the die seem to roll 2 or 3 times for every single roll? It’s like it rolls, but before it stops it starts another roll. How can we get the animation to roll once and then stop on the random number?

[HuzzzaifaMohd]

Bro which software do you use for video editing?

[pubggaming]

Bro I want auto scroll photo tutorial please 🙏

[osamatawfeq]

Why don't u add shadows to the dice? It'll be better and more realistic