간단한 애니메이션 07

간단한 애니메이션 07

간단한 애니메이션 만들기 일곱번째 시간입니다.
회전하면서 길쭉하게 늘어났다가 줄어드는 상자를 만들어보겠습니다.

---

01. HTML

{
    <div class="cube">
    <div>코딩대원</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
}

---

02. CSS

{
    body {
        background-color: #0B2C81;
        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);
        }
      }
}

---

03. 결과물