En CSS damos al elemento container un ancho y alto iguales determinado, para centrar el contenedor utilizamos la propiedad margin y con el valor relative en la propiedad position el elemento ya no será fijo de modo que los elementos hijos con valor absolute se ubicarán relativos a este elemento.

.container {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  position: relative;
}

Para el elemento cube solo definiremos un ancho y alto del 100% del elemento padre y el valor absolute en su propiedad position.

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
}

Para cada uno de los elementos figure dentro del elemento cube asignamos un ancho y alto del 100% de las medidas del elemento padre, eliminamos todo margen que haya sido heredado con el valor de 0, asignamos un borde de 2px y nuevamente el valor absulute en la propiedad position.

#cube figure {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px solid black;
  position: absolute;
}

A cada una de las caras asignamos un color flat como fondo, esto mediante el uso de la escala HSLa, con una transparencia del 50%.

#cube .back {
  background: hsla(0, 100%, 50%, 0.5); 
}

#cube .left {
  background: hsla(60, 100%, 50%, 0.5);
}

#cube .bottom {
  background: hsla(120, 100%, 50%, 0.5);
}

Ahora preparemos el entorno 3D con dos propiedades, la primera es perspective que asignara un valor a la posición desde la que se visualizara todo elemento con propiedades en tres dimensiones. 

.container {
  perspective: 400px;
}

La segunda propiedad es transform-style que con el valor de preserve-3d ayuda a visualizar el entrelazamiento de objetos en 3D.

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

Ahora usaremos la propiedad rotate, esta propiedad puede ser aplicada en cualquiera de los 3 ejes (x,y,z) con valores en grados sexagesimales.

#cube .back {
  transform: rotateX(0deg);
}

#cube .left {
  transform: rotateY(60deg);
}

#cube .bottom {
  transform: rotateX(60deg);
}

Ahora utilizaremos la propiedad translate, al igual que rotate esta propiedad también puede ser aplicada a los 3 ejes, en esta ocasión solo la trasladaremos en el eje z la mitad del tamaño del cubo en sentido negativo. En la propiedad rotate completamos el giro hasta los 90 grados.

#cube .back {
   transform: rotateX(0deg) translateZ(-75px);
}

#cube .left {
  transform: rotateY(90deg) translateZ(-75px);
}

#cube .bottom {
  transform: rotateX(90deg) translateZ(-75px);
}

Con esto ya se tendrá la mitad del cubo completamente ubicada.

Para completar el cubo en HTML agregamos las tres caras restantes ("front","right","top").

En CSS les asignamos un color flat, rotamos la misma cantidad de ángulos que su contraparte, pero al trasladarlos esta vez será en sentido positivo.

#cube .front {
  background: hsla(180, 100%, 50%, 0.5);
  transform: rotateX(0deg) translateZ(75px);
}

#cube .right {
  background: hsla(240, 100%, 50%, 0.5);
  transform: rotateY(90deg) translateZ(75px);
}

#cube .top {
  background: hsla(320, 100%, 50%, 0.5);
  transform: rotateX(90deg) translateZ(75px);
}

Con esto tenemos el cubo completamente generado y ubicado.

Ahora vamos a crear unos controles para poder girar el cubo. En HTML creamos una nueva

  
▲
  
▼
  
◄
  
►

.botones {
  width: 30px;
  height: 30px;
  margin: 0 auto
}

.boton {
  /*estructura*/
  width: 30px;
  height: 30px;
  background-color: black;
  border-radius: 50%;
  /*texto*/
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.botones {
  position: relative;
}

.boton {
  position: absolute;
}

#abajo {
  top: 35px;
}

#izquierda {
  top: 35px;
  left: -35px;
}

#derecha {
  top: 35px;
  left: 35px;
}

var angX = 0;
var angY = 0;

$('.boton').on('click', function() {
  switch ($(this).attr("id")) {
   }
});

case "arriba":
  angX = angX + 90;
  break;
case "abajo":
  angX = angX - 90;
  break;
case "derecha":
  angY = angY + 90;
  break;
case "izquierda":
  angY = angY - 90;
  break;

$('#cube').attr('style', 'transform: rotateX(' + angX + 'deg) rotateY(' + angY + 'deg);')

#cube {
  transition: transform 1s;
}