점점 Long 해졌다가 Short 해지는 박스 애니메이션 만들기

늘어나는 박스 애니메이션 구현하기!

박스가 천천히 돌아가면서 점점 Long 해졌다가 short해지는 애니메이션을 가진 3D 박스를 구현해보도록 하겠습니다.

HTML 코드

간단하게 HTML을 구성해 뼈대를 구축해봅시다!

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

---

CSS 코드

0. cube 클래스를 가진 이번 주제인 박스는 기본적으로 rotate라는 애니메이션을 통해 돌아가도록 설정해주고 1. 각각 좌표값에 맞게 keyframes를 구성해준뒤 'front/back/right/left/bottom/top'의 이름으로 설정합니다. 2. 각 면이 돌아가는 박스에 맞춰 translate로 같이 이동시켜주고 3. scaleY를 통해 박스가 늘어나도록 해줍니다.

body{
    background-color: #222;
    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) rotateZ(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);}
  }

---

결과