CSS 3D 주사위 정육면체 만들기

지난 시간에 알아보았던 perspective 및 preserve-3d를 활용해서 이번에는 3D 주사위를 만들었습니다. 따라서 본문의 내용을 완벽히 이해하시려면 이전 강좌를 반드시 필독하셔야 합니다. 어떤 글인지 찾기 어려우신 분들을 위해서 바로 아래에 좌표를 남겨두었으니 꼭 읽어주시기 바랍니다.

CSS preserve-3d 사용하여 육면체 단순 2단계 입체 배너 만들기

다 읽으셨죠? 그러면 바로 시작하겠습니다.

미리보기

See the Pen CSS 3D Dice by rgy0409 (@rgy0409) on CodePen.

지난 시간의 업그레이드 버전입니다. 차이점이라고 한다면 자식 요소가 두개에서 6개로 늘어났으며 각 자식 요소의 div에 대한 위치값이 더 추가되었다는 부분입니다. 원리는 위의 관련글에서 설명드린 부분과 동일합니다.

HTML 뼈대

<body>
    <div id="wrap">
        <div class="dice">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

dice라는 클래스명의 div가 주사위 전체를 구성하는 요소입니다. 즉 dice에 애니메이션을 적용시켜서 무한히 회전하게 됩니다. 자식요소 div가 6개인 이유는 주사위가 6면체이기 때문입니다. 각 div마다 번호를 매겼으니 쉽게 구별할 수 있습니다.

CSS 스타일시트

그럼 CSS 코드를 하나씩 살펴봅시다.

#wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 200px auto;
    perspective: 700px;
    cursor: pointer;
}

#wrap은 주사위의 모든 요소를 총괄하는 대장 부모요소입니다. 크기를 담당하고 있으며 원근 효과가 보여져야 하기에 perspective 옵션이 들어있습니다.

#wrap::after {
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    display: block;
    content: "";
    width: 120px;
    height: 10px;
    border-radius: 50%;
    filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.75);
}

#wrap의 가상 요소이며 주사위의 그림자 역할을 합니다. 왜 dice에 가상요소를 사용하지 않았냐고요? 간단합니다. 방금 전에도 말씀드렸듯 dice에 회전을 걸어줘야 합니다. 그러면 주사위의 가상 요소에 그림자가 적용되었으니 그림자도 같이 돌아가겠죠? 그래서 #wrap에 그림자를 만들어준 것입니다.

#wrap .dice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1.5s;
    transform-style: preserve-3d;
    animation: freeturn 6s linear infinite;
}

주사위의 전체를 구성하며 각 자식요소의 위치를 모두 겹치도록 만들어줍니다. 주사위의 본체이므로 여기에 preserve-3d가 마크업 되어있으며 회전하는 애니메이션을 적용시키기 위해 animation 효과가 마크업 되어있습니다.

@keyframes freeturn {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

애니메이션은 이렇게 구성되어 있습니다. X, Y, Z축에 대해 0~100% 동안 0도에서부터 360도까지 회전하도록 설계가 되어있습니다.

#wrap .dice > div:nth-child(1) {
    transform: translateZ(50px);
}

#wrap .dice > div:nth-child(2) {
    transform: translateX(-50px) rotateY(-90deg);
}

#wrap .dice > div:nth-child(3) {
    transform: translateZ(-50px) rotateY(-180deg);
}

#wrap .dice > div:nth-child(4) {
    transform: translateX(50px) rotateY(90deg);
}

#wrap .dice > div:nth-child(5) {
    transform: translateY(-50px) rotateX(90deg);
}

#wrap .dice > div:nth-child(6) {
    transform: translateY(50px) rotateX(270deg);
}

여기가 주사위의 각 면을 담당하는 요소들입니다. transform을 사용해서 위치를 고정시켜 주었습니다. 사실 이렇게 코드만 보면 잘 모를 수 있습니다. 직접 실행해보면서 값의 변화를 줘보세요. 그러면서 실시간 변하는 모습을 살펴봐야 합니다. 값을 키우거나 줄이면서 어디가 어떻게 바뀌는지 파악하면 이해하는데 상당한 도움이 됩니다. 눈으로 살펴보는것에서 끝내지말고 장인 정신으로 한땀한땀 입력해가며 체험해 보시는것을 권장합니다. 끝.