Pure CSS "Random" Dice Roller

Hello all. Playing around with animations and transforms I have created a “random” dice roller using only css. I quoted random because this is not using SASS or JS so it’s not really random but stops where ever you let go of the button.

The starting idea was just to use one <div> to control another and here’s the results.

Please let me know what you think. Thank you.


It looks awesome. Do you have a tool that helps you make those, or is it all manually inputting values? I really haven’t done any CSS graphics at all.


Very awesome and creative CSS graphic!

1 Like

A lot of manual and trial and error as far as positioning dots and and die. The cube shape itself can be found throughout the internet to get you going in the right direction.

As for the animation it was just a lot of learning and trying combinations of things to get what I wanted out of it.


1 Like