JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="stage">
  <ul id="cube">
  </ul>
</div>

SCSS

*,
*:before,
*:after{
  box-sizing: border-box;
}

#stage{
  perspective: 100vw;
  perspective-origin: center center;
  padding: 10vw 0;
}

#cube,
#cube li,
#cube span{
  transform-style: preserve-3d;
}

$tile-size: 15vw;

#cube{
  width: $tile-size;
  height: $tile-size;
  position: relative;
  display: block;
  margin: $tile-size auto 0;
  transform-origin: center center;
  transform: rotate3d(-0.5, 1, -0.2, 45deg);
  transition: transform 300ms;
  &:hover{
    transform: rotate3d(-1.5, 1, -0.2, 225deg);
  }
}

.seg{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: transform 300ms;
  transform-origin: center center;
  
  &--1{
    transform: translate3d(-$tile-size, -($tile-size), -$tile-size);
  }
  
  &--2{
    transform: translate3d(0, -($tile-size), -$tile-size);
  }
  
  &--3{
    transform: translate3d($tile-size, -($tile-size), -$tile-size);
  }
  
  &--4{
    transform: translate3d(-$tile-size, -($tile-size), 0);
  }
  
  &--5{
    transform: translate3d(0, -($tile-size), 0);
  }
  
  &--6{
    transform: translate3d($tile-size, -($tile-size), 0);
  }
  
  &--7{
    transform: translate3d(-$tile-size, -($tile-size), $tile-size);
  }
  
  &--8{
    transform: translate3d(0, -($tile-size), $tile-size);
  }
  
  &--9{
    transform: translate3d($tile-size, -($tile-size), $tile-size);
  }
  
  &--10{
    transform: translate3d(-$tile-size, 0, -$tile-size);
  }
  
  &--11{
    transform: translate3d(0, 0, -$tile-size);
  }
  
  &--12{
    transform: translate3d($tile-size, 0, -$tile-size);
  }
  
  &--13{
    transform: translate3d(-$tile-size, 0, 0);
  }
  
  &--14{
    transform: translate3d($tile-size, 0, 0);
  }
  
  &--15{
    transform: translate3d(-$tile-size, 0, $tile-size);
  }
  
  &--16{
    transform: translate3d(0, 0, $tile-size);
  }
  
  &--17{
    transform: translate3d($tile-size, 0, $tile-size);
  }
  
  &--18{
    transform: translate3d(-$tile-size, $tile-size, -$tile-size);
  }
  
  &--19{
    transform:...

JavaScript

var CUBE = document.getElementById('cube'),
		colorKeys = [
    	'red',
      'blue',
      'green',
      'orange',
      'yellow',
      'white'
    ];

for(var i = 0; i < 26; i++){
	var seg = document.createElement('li');
  seg.className = 'seg seg--' + (i + 1);
  for(var n = 0; n < 6; n++){
  	var face = document.createElement('span');
    face.className = 'face face--' + (n + 1) + ' ' + colorKeys[n];
    seg.appendChild(face);
  }
  CUBE.appendChild(seg);
}