body {
    
}
html, body{height: 100%;}
body{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  perspective: 500px;
}
#cube{
  width: 300px;
  height: 300px;
  position: relative;
  
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all 1s;
  //animation: anime 4s linear infinite reverse;
}

@keyframes anime{
  from{
    transform: rotateX(0deg) rotateY(0deg);
  }
  50%{
    transform: rotateX(150deg) rotateY(150deg);
  }
  to{
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.lado{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  position: absolute;
  height: 300px;
  width: 300px;
  border: 1px solid green;
  opacity: 0.5;
}
.back{transform: translateZ(150px); background: green;}
.front{transform: translateZ(-150px) rotateY(180deg); background: orange;}
.right{transform: translateX(150px) rotateY(90deg); background: lightblue;}
.left{transform: translateX(-150px) rotateY(-90deg); background: yellow;}
.bottom{transform: translateY(150px) rotateX(-90deg); background: orangered;}
.top{transform: translateY(-150px) rotateX(90deg); background: purple;}

.um{transform: rotateX(-90deg) rotateY(0deg)}
.dois{transform: rotateX(90deg) rotateY(0deg)}
.tres{transform: rotateX(0deg) rotateY(90deg)}
.quatro{transform: rotateX(0deg) rotateY(-90deg)}
.cinco{transform: rotateX(0deg) rotateY(180deg)}
.seis{transform: rotateX(0deg) rotateY(0deg)}

.btns{
  position: absolute;
  bottom: 100px;
}