//Source: https://icodemag.com/3d-rolling-dice-css-javascript/

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

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

/* //styling for Scene */
.scene {
  width: 100px;
  height: 100px;
  margin: 20px;
  perspective:300px;
}

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

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

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

/* //universal style for cube faces */
.cube__face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 4px solid white;
  line-height: 100px;
  font-size: 30px;
  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(50px); }
.cube__face--2   { transform: rotateY(180deg) translateZ(50px); }
.cube__face--3  { transform: rotateY( 90deg) translateZ(50px); }
.cube__face--4   { transform: rotateY(-90deg) translateZ(50px); }
.cube__face--5   { transform: rotateX( 90deg) translateZ(50px); }
.cube__face--6 { transform: rotateX(-90deg) translateZ(50px); }

label { margin-right: 10px; }