Css 3D 큐브 애니메이션

Css 3D 큐브 애니메이션

이번에는 transform을 이용해 아래와 같은 3D 큐브 애니메이션을 만들어 봤는데
그냥 재미로 한번 만들어 보자..

front

back

top

btm

left

right

Html 구조 잡기

html은 아래 코드와 같이 생각보다 엄청 간단하다.
정육면체의 앞, 뒤, 위, 아래, 좌, 우면과 각각의 면들을 감싸는 요소만 있으면 된다.

<div class="cube">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="top">top</div>
    <div class="btm">btm</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Css 작성하기

먼저 큐브를 감싸는 녀석부터 원하는 크기와 

각 면들의 3D애니메이션을 위해 transform-style에 preserve-3d를 지정해주었다.

.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
}

다음으로 absolute를 사용하여 큐브의 모든 면을 겹쳐 두고 

3D효과를 위한 위치를 맞춰 주어야 한다. 

.cube > div {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 200px;
    opacity: .5;
}

여기까지 아래와 같이 텍스트가 겹쳐져 나오면 반은 끝!!

먼저 앞면과 뒷면을 만들어 보자
앞면은 translateZ로 당겨 주어야하고 뒷면의 경우 뒤로 밀어야 하는데
뒷면을 앞뒤로 뒤집었기 때문에 -100px이 아닌 100px을 주었다

.front {
    transform: translateZ(100px);
    background: purple;
}
.back {
    transform: rotateY(180deg) translateZ(100px);
    background: red;
}

이렇게 나오면 앞뒷면 완성 !!

이제 비슷한 방식으로 나머지 면도 만들면 끝!

좌우면의 경우 각각 왼쪽, 오른쪽으로 만큼 돌린 후 translateZ를 이용해 좌우 양끝으로 밀었고

.left {
    transform: rotateY(-90deg) translateZ(100px);
    background: blue;
}
.right {
    transform: rotateY(90deg) translateZ(100px);
    background: yellow;
}

윗면과 아랫면은 좌우면과 비슷하게 x축을 기준으로 돌려서 양끝으로 밀면 된다.

.top {
    transform: rotateX(-90deg) translateZ(100px);
    background: black;
}
.btm {
    transform: rotateX(90deg) translateZ(100px);
    background: green;
}

마지막으로 .cube에 아래 css 추가하고
키프레임으로 애니메이션 만들어주면 css까지 끝이다 !!

.cube {
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    100% {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}