style.css

body{
  width: 100%;
  height: 100vh;
  width: 100vw;
  background: turquoise;
  /*width: 100px;
  height: 100px;*/
}
/*
div:hover {
    -webkit-transform: rotateX(150deg); 
    transform: rotateX(150deg);
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  margin: 0;

  display: block;
  position: absolute;
  border: 2px solid black;
}

#cube.show-front  { transform: translateZ( -100px ) rotateY(    0deg ); }
#cube.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); }
#cube.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); }
#cube.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
#cube.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }

#cube { transition: transform 1s; }*/