BoxStretch 애니메이션

BoxStretch 애니메이션

Code pen을 사용하여 BoxStretch(늘어나는 박스) 애니메이션을 만들어보았습니다.

---

HTML

상자를 의미하는 cube 클래스 내부에 각 면이 될 6개의 div태그를 만들어줍니다.

<div class="cube">
    <div>코터틀</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

배경색을 설정하고, 부모인 cube 클래스에 애니메이션 회전 효과와 원근감이 표현되도록 preserve-3d 효과를 줍니다.
내부 div태그의 중앙정렬과 위치를 설정하고 nth-child를 통하여 각 면의 색과 회전 각도, 방향, 회전 중심, 애니메이션을 설정해주면 끝입니다...?

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