perspective와 transform-style: preserve-3d로 3D 공간만들기

웹사이트에서 단순히 2차원적인 요소를 배치하는 것을 넘어, 카드 플립(Card Flip), 큐브 회전(Cube Rotation) 등 3D 효과를 구현하고 싶을 때가 있습니다. 이때 transform 속성(예: rotateY(), translateZ())을 사용하지만, 이들이 진정한 3D 공간 안에서 동작하도록 만들려면 몇 가지 추가 속성이 필요합니다.

erspective 속성: 3D 원근감을 부여하는 마법의 눈
perspective 속성은 3D 변형이 적용된 자식 요소에 원근감을 부여합니다. 마치 카메라 렌즈의 초점 거리처럼, 이 값을 통해 요소가 사용자로부터 얼마나 멀리 또는 가까이 떨어져 있는 것처럼 보이는지 제어할 수 있습니다.

적용 위치: 3D 변형을 포함하는 부모 요소에 적용합니다.
값: 주로 px 단위로 거리를 지정합니다. 값이 작을수록 원근감이 강해지고(가까이서 보는 느낌), 값이 클수록 원근감이 약해집니다(멀리서 보는 느낌).

.container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
perspective: 1000px; /* 이 컨테이너 안의 3D 요소에 원근감을 부여 */
/* ... (다른 스타일) ... */
}

.box {
width: 100%;
height: 100%;
transition: transform 0.5s;
transform: rotateY(0deg);
}

.container:hover .box {
transform: rotateY(45deg); /* 호버 시 3D 회전 */
}

이 상태에서는 box가 회전하기는 하지만, 3D 느낌이 약하고, 만약 box 안에 다른 3D 요소가 있다면 제대로 동작하지 않을 수 있습니다.

transform-style: preserve-3d: 진정한 3D 공간 만들기
perspective가 원근감을 부여한다면, transform-style: preserve-3d는 자식 요소들이 부모의 3D 공간 안에 그대로 존재하도록 만듭니다. 이 속성이 없으면, 자식 요소들은 2차원적으로 평면화되어 버립니다.

적용 위치: 3D 변형을 적용할 요소(주로 transform이 적용될 요소)의 부모 요소에 적용합니다.
값: preserve-3d 고정 값.

.container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
perspective: 1000px;
}

.card {
width: 100%;
height: 100%;
position: relative; /* 자식 요소 포지셔닝을 위해 */
transform-style: preserve-3d; /* 이 카드의 앞/뒷면이 3D 공간에 있도록 설정 */
transition: transform 0.6s;
transform: rotateY(0deg);
}

.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 뒷면이 보이지 않도록 */
}

.back {
transform: rotateY(180deg); /* 뒷면은 180도 회전하여 시작 */
}

.container:hover .card {
transform: rotateY(180deg); /* 호버 시 카드 뒤집기 */
}

실전 예시: 카드 플립(Card Flip) 효과
카드 앞면과 뒷면을 가진 요소를 만들고, 마우스를 올리면 카드가 3D로 회전하며 뒷면이 보이도록 하는 예시입니다.

<div class="flip-container">
<div class="flipper">
<div class="front">
<h3>카드 앞면</h3>
<p>여기에 앞면 내용이 있습니다.</p>
</div>
<div class="back">
<h3>카드 뒷면</h3>
<p>여기에 뒷면 내용이 있습니다.</p>
</div>
</div>
</div>

.flip-container {
width: 200px;
height: 250px;
margin: 50px auto;
perspective: 1000px; /* 3D 효과를 위한 원근감 (부모에 적용) */
}

.flipper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /* 자식(앞/뒷면)이 3D 공간에 있도록 (변형될 요소의 부모에 적용) */
transition: transform 0.8s; /* 부드러운 전환 효과 */
}

/* 마우스 호버 시 카드 뒤집기 */
.flip-container:hover .flipper {
transform: rotateY(180deg);
}

.front, .back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden; /* 뒷면이 돌아가기 전에는 보이지 않도록 */
}

.front {
background-color: #f0f8ff; /* 연한 파랑 */
color: #333;
z-index: 2; /* 앞면이 위에 있도록 */
}

.back {
background-color: #333; /* 어두운 배경 */
color: #f0f8ff; /* 밝은 글자 */
transform: rotateY(180deg); /* 뒷면은 180도 돌려놓고 시작 */
}