[CSS] "고무고무💪🏻 박스" 를 만들어봅시다!

📎codepen을 이용해서 "고무고무 박스"를 만들어봅시다!

이번 애니메이션은 박스가 원피스에 나오는 루피 팔마냥 쭈욱 쫘악 늘어나는 박스입니다.
제 height도 저렇게 늘어났으면 좋겠습니다...🙏🏻

---

코드 소스를 알아봅시다.💻

✔️HTML

정육면체이므로 div박스를 여섯개 만들어줍니다.

<div class="cube">
    <div>징징이😖</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>  
</div>

✔️CSS

nth-child를 통해 각 면의 변형값과 애니메이션을 만들어줍니다.

body {
    background-color: skyblue;
    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(0deg);
    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) translatez(0)
    }
    100% {
      transform: rotatex(360deg) rotatey(360deg) rotatez(360deg) translatez(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);
    }
}