css애니메이션 - 움직이는 박스

div class="document">

애니메이션 : 움직이는 박스

body {
  background-color: #666;
  height: 100vh;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotatex(-20deg) rotatey(-140deg) translatez(0);
  animation: rotate 8000ms linear infinite;
}

.cube div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  opacity: 0.75;
  color: #fff;
}
.cube div:nth-child(1) {
  background-color: #ffcc80;
  transform-origin: center top;
  transform: rotatex(90deg) translatey(-100px);
  animation: top 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(2) {
  background-color: #ffb74d;
  transform-origin: center bottom;
  transform: rotatex(-90deg) translatey(100px);
  animation: bottom 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(3) {
  background-color: #ffa726;
  transform-origin: left center;
  transform: rotatey(-90deg) translatex(-100px);
  animation: left 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(4) {
  background-color: #ff9800;
  transform-origin: right center;
  transform: rotatey(90deg) translatex(100px);
  animation: right 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(5) {
  background-color: #fb8c00;
  transform-origin: center center;
  transform: rotatex(0);
  animation: front 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(6) {
  background-color: #ffb74d;
  transform-origin: center center;
  transform: rotatey(180deg) translatez(100px);
  animation: back 4000ms ease-in-out 8000ms infinite;
}
@keyframes rotate {
  0%{
    transform: 
      rotatex(0) 
      rotatey(0) 
      rotatez(0) 
      translatey(0);
  }
  100%{
    transform: 
      rotatex(360deg) 
      rotatey(360deg) 
      rotatez(360deg) 
      translatey(0);
  }
}

@keyframes top {
  0%{
    transform: 
      rotatex(90deg) 
      translatey(-100px) 
      translatez(0);
  }
  50%{
    transform: 
      rotatex(90deg) 
      translatey(-100px) 
      translatez(100px);
  }
  100%{
    transform: 
      rotatex(90deg) 
      translatey(-100px) 
      translatez(0);
  }
}

@keyframes bottom {
  0%{
    transform: 
      rotatex(-90deg) 
      translatey(100px) 
      translatez(0);
  }
  50%{
    transform: 
      rotatex(-90deg) 
      translatey(100px) 
      translatez(100px);
  }
  100%{
    transform: 
      rotatex(-90deg) 
      translatey(100px) 
      translatez(0);
  }
}

@keyframes left {
  0%{
    transform: 
      rotatey(-90deg) 
      translatex(-100px) 
      scaley(1);
  }
  50%{
    transform: 
      rotatey(-90deg) 
      translatex(-100px) 
      scaley(3);
  }
  100%{
    transform: 
      rotatey(-90deg) 
      translatex(-100px) 
      scaley(1);
  }
}

@keyframes right {
  0%{
    transform: 
      rotatey(90deg) 
      translatex(100px) 
      scaley(1);
  }
  50%{
    transform: 
      rotatey(90deg) 
      translatex(100px) 
      scaley(3);
  }
  100%{
    transform: 
      rotatey(90deg) 
      translatex(100px) 
      scaley(1);
  }
}

@keyframes front {
  0%{transform: rotateX(0deg) scaleY(1);}
  50%{transform: rotateX(0deg) scaleY(3);}
  100%{transform: rotateX(0deg) scaleY(1);}
}

@keyframes back {
  0%{
    transform: 
      rotatey(180deg) 
      translatez(100px) 
      scaley(1);
  }
  50%{
    transform: 
      rotatey(180deg) 
      translatez(100px) 
      scaley(3);
  }
  100%{
    transform: 
      rotatey(180deg) 
      translatez(100px) 
      scaley(1);
  }
}