<div class = 'container'>
  
    <div class="cube One">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right"></div>
    </div>
  
  <!--<div class="cube Two">
        <div class="side front"></div>
        <div class="side back"></div>
        <div class="side top"></div>
        <div class="side bottom"></div>
        <div class="side left"></div>
        <div class="side right"></div>
    </div>
  
    <div class="cube Three">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right"></div>
    </div>
   
    <div class="cube Four">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right"></div>
    </div>
</div>
  
  <div class="wrap">
    <div class="cube Five">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right"></div>
    </div>
  
    <div class="cube Six">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right"></div>
    </div>-->
  
</div>

body {
  background: #1d1d1d;
}

.container {
  display: flex;
  padding: 0;
  margin-top: 100px;
}

 
.cube {
  transform-style: preserve-3d;
  perspective: 1000px;
	transform: rotateX(20deg) rotateY(-20deg);
  width: 100px;
  transition: 1s;
  margin: 20px;
  flex-grow: 1;
}

.side {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  position: absolute;
  transition: 1s;
  opacity: .5;
}


/*.front {
  transform: rotateY(0deg) translateZ(50px);
  background: red;
  border: 1px solid white;
}*/

.back {
  transform: rotateX(180deg) translateZ(50px);
  background: deepskyblue;
  border: 1px solid white;
}

.top {
  transform: rotateX(90deg) translateZ(50px);
  background: purple;
  border: 1px solid white;
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
  background: blue;
  border: 1px solid white;
  opacity: 1;
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
  background: green;
  border: 1px solid white;
}

.right {
  transform: rotateY(90deg) translateZ(50px);
  background: yellow;
  border: 1px solid white;
}


/*.turnleft {
  transform: rotateY(-90deg);
}

.turnright {
  transform: rotateY(90deg);
}

.turnup {
  transform: rotateX(90deg);
}

.turndown {
  transform: rotateX(-90deg);
}*/

/*var safeColors = ['00','22','44','99','cc','ff'];
var rand = function() {
    return Math.floor(Math.random()*6);
};
var randomColor = function() {
    var r = safeColors[rand()];
    var g = safeColors[rand()];
    var b = safeColors[rand()];
    return "#"+r+g+b;
};

var movements = ['turnleft', 'turnright', 'turnup', 'turndown'];
var randMov = function() {
  return Math.floor(Math.random()*4);
};

var randomSpin = function() {
  var move = movements[randMov()];
  return move;
};

$(document).ready(function() {
  
  $('.cube').mouseover(function() {
    //$(this).addClass('spin');
    $(this).find('.side').css('background',randomColor());
    $(this).addClass(randomSpin());
  });
  
  $('.cube').mouseout(function() {
    $(this).removeClass(randomSpin());
  });
  
});*/