<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 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 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 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>
body {
  background: #1d1d1d;
}

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





.cube {
  perspective: 0px;
	perspective-origin: 50% 100px;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  transform: translateZ(-150px);
  transition: 1s;
  margin: 50px;
}

.side {
  width: 100px;
  height: 100px;
  position: absolute;
  background: deepskyblue;
  border: 1px solid white;
  transition: 1s;
}


.front {
  transform: rotateY(0deg) translateZ(50px);
}

.back {
  transform: rotateX(180deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}


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

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

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

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

@media screen and (max-width: 690px) {
  .container {
    flex-wrap: wrap;
    margin-top: 20px;
  }
  
  .cube {
      margin-bottom: 20px;
  }
}


/*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());
  });
  
});*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js