Custom dice!
How does this work? (contains animations)
Note: You need to click somewhat quickly for this CSS trick to work. If you're having trouble getting the die to roll, try double-clicking it instead!
We start off by creating 6 different summary elements that all use the slideupright animation with offsets to create an animation like this:
We then limit the CSS animation with steps, assign a number to every element, and make clicking them reveal a number.
1.
2.
3.
4.
5.
6.
Try clicking within the red box to reveal and hide numbers! In the final post we use some CSS positioning magic to make only the area marked with the red box clickable.
This pretty much lets us get a seemingly random number when we click on a specific location. And here we use it to play a GIF of a die rolling :).
Also shout out to this tutorial for showing me how to make dice in Blender xD
