.container-cube{
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:100%;
  height: 100%;
  position: absolute;
  /* border:1px solid green; */
}

.container-cube-rel {
    height:100%;
    width: 100%;
    position:relative;
    transform-style : preserve-3d;
    transform: perspective(100vw);
}

.animated-cube {
    width:100%;
    height:100%;
    position:absolute;
    /* top:50%;
    left:50%;
    transform: translate(-50%, -50%); */
    transform-style : preserve-3d;
    animation-name : rotate-full;
    animation-duration : 10s;
    animation-iteration-count: infinite;
    animation-timing-function : linear;
    /* border:1px solid red; */
}

.face {
    height : 10%;
    width : 10%;
    position : absolute;
    background-color: rgb(255, 255, 255,.2);
}


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