rolling dice 3

references : https://codepen.io/desandro/pen/KRWjzm

by Daehyun Im

HTML

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">1</div>
    <div class="cube__face cube__face--back">2</div>
    <div class="cube__face cube__face--right">3</div>
    <div class="cube__face cube__face--left">4</div>
    <div class="cube__face cube__face--top">5</div>
    <div class="cube__face cube__face--bottom">6</div>
  </div>
</div>
<p class="radio-group">
  <label>
    <input type="radio" name="rotate-cube-side" value="roll" checked /> roll
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="stop" checked /> stop
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="front" checked /> front
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="right" /> right
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="back" /> back
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="left" /> left
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="top" /> top
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="bottom" /> bottom
  </label>
</p>

CSS

@keyframes diceRoll {
    0% {
      transform: translateZ(-100px) rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
    }
  }
  
  @keyframes diceStop {
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
    }
  }
  
  @keyframes diceFront {
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);
    }
  }
  
  @keyframes diceRight {
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(270deg);
    }
  }
  @keyframes diceBack {
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(180deg);
    }
  }
  @keyframes diceLeft {
    100% {
      transform: translateZ(-100px) rotateX(360deg) rotateY(450deg);
    }
  }
  @keyframes diceTop {
    100% {
      transform: translateZ(-100px) rotateX(270deg) rotateY(360deg);
    }
  }
  @keyframes diceBottom {
    100% {
      transform: translateZ(-100px) rotateX(450deg) rotateY(360deg);
    }
  }
  
  * { box-sizing: border-box; }
  
  body { font-family: sans-serif; background-color:#20262E; }
  
  .scene {
    width: 200px;
    height: 200px;
    border: 1px solid #CCC;
    margin: 80px;
    perspective: 400px;
  }
  
  .cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 2s ease;
  }
  

  .cube.show-roll   { animation: diceRoll 1s infinite linear; }
  .cube.show-roll:hover   { animation-play-state: paused; }
  .cube.show-stop   { animation: diceStop .5s forwards linear;}
  .cube.show-front  { animation: diceFront .5s forwards linear; }
  .cube.show-right  { animation: diceRight .5s forwards linear; }
  .cube.show-back   { animation: diceBack .5s forwards linear; }
  .cube.show-left   { animation: diceLeft .5s forwards linear; }
  .cube.show-top    { animation: diceTop .5s forwards linear; }
  .cube.show-bottom { animation: diceBottom .5s forwards linear; }
  
...

JavaScript

var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';
var showClass = '';

function changeSide() {
  var checkedRadio = radioGroup.querySelectorAll('input');
 
  while(currentClass == showClass || showClass == undefined) {
/* 	  let randomValue = Math.floor(Math.random() * 5);
	      showClass = 'show-' + checkedRadio[randomValue].value; */
    cube.style.transform = setMatrix();
  	showClass = 'show-' + document.querySelector('input[type="radio"]:checked').value;

  }
  
  if ( currentClass ) {
    cube.classList.remove( currentClass );
  }
  cube.classList.add( showClass );
  currentClass = showClass;
}
// set initial side
/* changeSide();
setInterval(changeSide, 4000); */

radioGroup.addEventListener( 'change', changeSide );

function setMatrix() {
  const style = window.getComputedStyle(cube)
  const matrix = style.transform || style.webkitTransform || style.mozTransform

  // Can either be 2d or 3d transform
  const matrixType = matrix.includes('3d') ? '3d' : '2d'
  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')
  /* if (matrixType === '3d') {
    const x = matrixValues[12];
    const y = matrixValues[13];
    const z = matrixValues[14];
  
    console.log(
      {
        x: matrixValues[12],
        y: matrixValues[13],
        z: matrixValues[14],
        matrix: matrix
      }
    );
  } */
  
  return matrix;
}