Edit in JSFiddle

// Inspiration / Copy/Paste Source: https://desandro.github.io/3dtransforms/docs/rectangular-prism.html

var boxDimensions = {
	width: 172,
  height: 260,
  depth: 64
};


var box = document.querySelector('.container').children[0],
  showPanelButtons = document.querySelectorAll('#show-buttons button'),
  panelClassName = 'show-front',

  onButtonClick = function(event) {
  	$(box).css('transform', '');
    box.classList.remove(panelClassName);
    panelClassName = event.target.className;
    box.classList.add(panelClassName);
  };

for (var i = 0, len = showPanelButtons.length; i < len; i++) {
  showPanelButtons[i].addEventListener('click', onButtonClick, false);
}

$(box).on('mouseover mousemove', function(event){
  var x = event.pageX - $(box).offset().left;
	var y = event.pageY - $(box).offset().top;
  
  var xDegrees = ((x - (boxDimensions.width / 2)) / boxDimensions.width) * 50;
	var yDegrees = ((y - (boxDimensions.height / 2)) / boxDimensions.height) * 20;
  
  $(box).css('transform', 'rotateY(' + xDegrees + 'deg) rotateX(' + -yDegrees + 'deg)')
})

<section class="container">
  <div id="box" class="show-front">
    <figure class="front"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
  </div>
</section>

<br>
<hr>

<p id="show-buttons">
  <button class="show-left">Show LEFT</button>
  <button class="show-front">Show FRONT</button>
  <button class="show-right">Show RIGHT</button>
</p>

$box-dimensions--width: 172px;
$box-dimensions--height: 260px;
$box-dimensions--depth: 64px;

.container {
  width: $box-dimensions--width;
  height: $box-dimensions--height;
  position: relative;
  margin: 40px auto;
  perspective: 500px;
}

#box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transition: transform 1s;
  
  &:hover {
    transition: transform 0.1s;
  }
}

#box figure {
  display: block;
  position: absolute;
  margin: 0;
  font-family: sans-serif;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  color: white;
  backface-visibility: hidden;
}

#box .front {
  width: $box-dimensions--width;
  height: $box-dimensions--height;
  background-color: #036;
  background-image: url("https://dl.dropboxusercontent.com/u/30174802/_cdn/c-box/front.jpg");
}

#box .right,
#box .left {
  width: $box-dimensions--depth;
  height: $box-dimensions--height;
  background-color: #039;
}

#box .left {
  left: -$box-dimensions--depth;
  transform-origin: top right;
  transform: rotateY(-90deg);
  background-image: url("https://dl.dropboxusercontent.com/u/30174802/_cdn/c-box/left.jpg");
}

#box .right {
  right: -$box-dimensions--depth;
  transform-origin: top left;
  transform: rotateY(90deg);
  background-image: url("https://dl.dropboxusercontent.com/u/30174802/_cdn/c-box/right.jpg");
}

#box.show-right {
  transform: translateZ(-$box-dimensions--width / 2) rotateY(-90deg);
}

#box.show-left {
  transform: translateZ(-$box-dimensions--depth) rotateY(90deg);
}