html,body {
    width:100%;
    height:100%;
    background-color:black;
}
#outer_cube {
    width:100%;
    height:100%;
    position:relative;
    transform-style : preserve-3d ;
    transform: perspective(400px)
    /* prespective : 500; */
}

#inner_cube {
    width:300px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-150px;
  margin-top:-50px;
    transform-style : preserve-3d;
    animation-name : rotate-full;
    animation-duration : 12s;
    animation-iteration-count: infinite;
    animation-timing-function : linear;
}

.inner_object {
    height : 20px;
    width : 20px;
    position : absolute;
    background-color : white;
    transition : all 1s ease-out;
    opacity:.5;
}

@keyframes rotate-full {
    0% {
    -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }

  50% {
    -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
  }

  100% {
    -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
  }
}