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%; */
    top:calc(50% - 150px);
    left:calc(50% - 150px);
    transform-style : preserve-3d;
    animation-name : rotate-full;
    animation-duration : 10s;
    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; */
}

.red{
  background-color : red;
}
.blue{
  background-color : blue;
}
.green{
  background-color : green;
}

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

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

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