CSS Animation - cube

<div class="cube">
  <div>Kang</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

body {
  background-color: #FCDF8A;
  height: 100vh;
  perspective: 1000px;
  //perspective를 사용해서 원근감을 줄수있다. 숫자가 커질수록 멀리서 보는 느낌이 든다.
  display: flex;
  align-items: center;
  justify-content: center;
}
.cube {
	position: relative;
	width: 100px; height: 100px;
	transform-style: preserve-3d;
    // 요소의 움직임 방향을 정의한다. preserve-3d로 할경우 3d로 설정이 가능하다
	transform: rotateX(60deg) rotatey(-30deg);
    //rotate는 회전
	animation: rotate 2s linear infinite;
}

.cube > div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0; left: 0;
  width: 100px; height: 100px;
  opacity: 0.7;
  color: #fff;
}
.cube div:nth-child(1) {
  background: #7367F0;
  transform-origin: center top;
  transform: rotatex(90deg) translatey(-100px);
  animation: top 4s 8s ease-in-out infinite;
  // 8s는 딜레이를 준다는 의미 
}

.cube div:nth-child(2) {
  background: #CE9FFC;
  transform-origin: center bottom;
  transform: rotatex(-90deg) translatey(100px);
  animation: bottom 4s 8s ease-in-out infinite;
}

.cube div:nth-child(3) {
  background: #6E8EFB;
  transform-origin: left center;
  transform: rotatey(-90deg) translatex(-100px);
  animation: left 4s 8s ease-in-out infinite;
}

.cube div:nth-child(4) {
  background: #A777E3;
  transform-origin: right center;
  transform: rotatey(90deg) translatex(100px);
  animation: right 4s 8s ease-in-out infinite;
}

.cube div:nth-child(5) {
  background: #CE9FFC;
  transform-origin: center center;
  transform: rotatey(0deg) translatex(0px);
  animation: front 4s 8s ease-in-out infinite;
}

.cube div:nth-child(6) {
  background: #8E37D7;
  transform-origin: center center;
  transform: rotatey(180deg) translatez(100px);
  animation: back 4s 8s ease-in-out infinite;
}

@keyframes rotate {
  0%   {transform: rotatex(0) rotatey(0) rotatez(0) translatez(0);}
  100% {transform: rotatex(360deg) rotatey(360deg) rotatez(360deg) translatez(360deg);}
}

@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) translatex(0px) scaley(1);}
  50%  {transform: rotatex(0deg) translatex(0px) scaley(3);}
  100% {transform: rotatex(0deg) translatex(0px) 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);}
}