.wrap{
  position: relative;
}
.cube-container {
  width: 100%;
  height: 100vh;
  position: relative;
  perspective: 2000px;
  background: #222;
}

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

#cube figure {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  background: #222;
  color: white;
}
#cube figure img{
  width: 100vw;
  height: 100vh;
}

#cube .front {
  transform: rotateY(0deg) translateZ(50vw);
}

#cube .back {
  transform: rotateY(180deg) translateZ(50vw);
  background: gold;
}

#cube .right {
  transform: rotateY(90deg) translateZ(50vw);
  background: dodgerblue;
}

#cube .left {
  transform: rotateY(-90deg) translateZ(50vw);
  background: cadetblue;
}

#cube .top {
  transform: rotateX(90deg) translateZ(50vw);
  background: mintgreen;
}

#cube .bottom {
  transform: rotateX(-90deg) translateZ(50vw);
  background: lavender;
}

#cube {
  transform: translateZ(-50vw);
}

#cube {
  transition: transform 1.5s ease-in-out;
}

.tran-3d{

  position: absolute;
  width: 50px;
  height: 100px;
  background: #000;
  opacity:0.5;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
}
.tran-3d:hover{
	cursor: pointer;
	opacity:0.3;
}

.previous{
    top: 45%;
	left: 30px;
	
}
.next{
  top: 45%;
  right: 30px;
}