How to Create 3D Rolling Dice with CSS and JavaScript

This will be a tutorial covering how to create a 3D cube (a dice) in CSS and give it a rolling functionality, so you can roll to a random number between 1 and 6. We will be using HTML, CSS and JavaScript together to achieve the full functioning rolling dice with a button to trigger a roll. There is also a video showing you an overview of how this is achieved.

Step 1: Setup the HTML

So there is not a great deal going on here. We add a heading of h2 with a paragraph p to describe what this is. Most of the code relevant to understand is the scene, cube, and cubeface divs. This markup is what we will style to create a 3D cube in CSS.

As you can see there is a parent div called cube and child class divs (the cubefaces). Each cubeface has a common class of cube__face as well as a unique one depending on which number face it is (cube__face–1, ube__face–2, etc.). When we style this up this will become more obvious. Finally, there is a button which will function as our click event for rolling the dice.

<h2>3D Dice CSS</h2>  
<p>Click the button below to Roll the Dice</p>
<div class = "scene">
   <div class="cube">
    <div class="cube__face cube__face--1">1</div>
    <div class="cube__face cube__face--2">2</div>
    <div class="cube__face cube__face--3">3</div>
    <div class="cube__face cube__face--4">4</div>
    <div class="cube__face cube__face--5">5</div>
    <div class="cube__face cube__face--6">6</div>
  </div>
  
  <button class = "rollBtn">Roll the Dice</button>
</div>

Step 2: Lets Create the Cube with CSS

There is a quite a lot to cover here so I will try and cover the main concepts. Key classes are scene, cube, cube__face, and the transforms for showing a cubeface when it is selected, which we will cover next in the JavaScript.

When the scene, cube and cubeface are setup, the faces are all laid out on top of each other and we apply some transforms to rotate each face on the Y axis and modify the Z axis to create the 3D cube effect (classes cube__face–1, cube__face–2, etc.).

If you get stuck refer to Intro to CSS 3D transforms. 

Next, we have to give it some rolling functionality which we do with JavaScript.

//general stying for page 
* { box-sizing: border-box; }

body { 
  font-family: sans-serif;
  background:green;
  color:white;
}

//styling for Scene
.scene {
  width: 200px;
  height: 200px;
  margin: 20px;
  perspective:600px;
}

.rollBtn{
  background:black;
  color:white;
  border:none;
  margin:auto 0;
  font-size:1.5em;
  margin-top:1em;
  width:200px;
}

//styling for 3D Cube
.cube {
  width:200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

//styling for 3D Cube transforms / animations on face select (on roll)
.cube.show-1  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-2  { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-3  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-4   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-5   { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-6 { transform: translateZ(-100px) rotateX(  90deg); }

//universal style for cube faces 
.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 4px solid white;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

//individual styling for each numbers face 
.cube__face--1  { background: black;  opacity: 0.75;}
.cube__face--3  { background: black;   opacity: 0.75; }
.cube__face--2  {  background: black;   opacity: 0.75; }
.cube__face--4  {  background: black;   opacity: 0.75; }
.cube__face--5   {  background: black;   opacity: 0.75; }
.cube__face--6 {  background: black;  opacity: 0.75; }

.cube__face--1  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--2   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--3  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--4   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--5   { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--6 { transform: rotateX(-90deg) translateZ(100px); }

label { margin-right: 10px; }

Step 3: Final Step – Rolling with JavaScript

Finally, we add the following JavaScript. I have left comments in the code to describe what is going on here, but basically on the button click, we run a function getRandomInt to generate a random integer with a min and max set. Then we assign a class showClass with that random number, remove the existing currentClass if present, and replace it with the new showClass. We also set an initial rollDice, so we get a random number on load.

And that is it, a rolling dice created with CSS and JavaScript.

//select the classes we require
var cube = document.querySelector('.cube');
var rollBtn = document.querySelector('.rollBtn');
var currentClass = '';

//this function will generate a random number between 1 and 6 (or whatever value you send it)
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

//our main roll dice function on click
function rollDice() {
//genberate a random number between 1 and 6 with out getRandomInt function
 var randNum =getRandomInt(1,7); 
  console.log(randNum )
  //generate a class with the random number between 1 - 6 called showClass
  var showClass = 'show-' + randNum;
  console.log(showClass)
// if there is a class already selected remove it
  if ( currentClass ) {
    cube.classList.remove( currentClass );
  }
// add the new showclass with the generated number
  cube.classList.add( showClass );
//set the current class to the randomly generated number
  currentClass = showClass;
}
// set initial side
rollDice();
// on click eventlistener for the button element
rollBtn.addEventListener("click", rollDice);

You can view the full source code here.

YouTube Video to this Tutorial:

 

Related Posts