CSS 애니메이션 만들기 : 3D 박스 애니메이션

CSS 애니메이션 : 3D 박스 애니메이션

오늘은 움직이면서 크기가 변형되는 3D 박스를 만들어 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다.

See the Pen Untitled by mj0614k (@mj0614k) on CodePen.

---

1. HTML 소스

<div class="cube">
    <div>소름</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

cube class를 가진 div 박스를 하나 만들어 주고, 그 안에 div 박스 6개를 작업해 줍니다. div 박스 6개는 정육면체의 각각의 면입니다. 원하는 문구를 작성하면 됩니다.

2. CSS 소스

body {
    background-color: lavender;
    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 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 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 front {
    0% {transform: rotatex(0deg) scaley(1)}
    50% {transform: rotatex(0deg) scaley(3)}
    100% {transform: rotatex(0deg) scaley(1)}
}
@keyframes back {
    0% {transform: rotatex(180deg) translatez(100px) scaley(1)}
    50% {transform: rotatex(180deg) translatez(100px) scaley(3)}
    100% {transform: rotatex(180deg) translatez(100px) scaley(1)}
}

저는 이것을 이해할 만큼 아직 성장하지 못했습니다... 설명도 못 해...

아무튼 위의 HTML, CSS 소스를 합치면 애니메이션이 완성됩니다.