html,body {
    width:100%;
    height:100%;
    /* background-color:rgba(0, 0, 0, 0.2); */
    overflow: hidden;
}
#scene {
    width:100%;
    height:100%;
    position:relative;
    transform-style : preserve-3d ;
    transform: perspective(400px);
    /* prespective : 500; */
}

.axis { 
    position:absolute;
    
    
    transform-style : preserve-3d;
    animation-name : rotate-full;   
    animation-iteration-count: infinite;
    animation-timing-function : linear;
}

/* .num1{
  width:300px;
  height:300px;
  top:calc(50% - 150px);
  left:calc(50% - 150px);
  border:1px solid red;
  animation-duration : 10s;
} */
/* .num2{
  width:280px;
  height:280px;
  top:calc(50% - 140px);
  left:calc(50% - 140px);
  border:1px solid yellow;
  animation-duration : 10s;
} */

.inner_object {
    height : 2px;
    width : 2px;
    position : absolute;
    background-color: white;
    border-radius: 50%;
}

.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: rotateX(45deg) rotateZ(0deg);
  }
  /* 50% {
    /* -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg); 
  } */

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