CSS3 translateZ() 메서드로 z축 방향 요소 변환하기

CSS3에서는 translateZ(z) 메서드를 사용하여 요소를 z축(3차원 공간의 깊이 방향)으로 이동시킬 수 있습니다. 이 메서드를 활용하면 화면에서 요소를 앞쪽으로 당겨오거나 뒤로 밀어내는 입체적인 효과를 쉽게 구현할 수 있습니다.

translateZ() 기본 문법

translateZ(z)

여기서 각 매개변수의 의미는 다음과 같습니다.

• z: 이동 벡터의 z축 성분을 나타내는 길이 값입니다. 양수 값은 요소를 관찰자 쪽으로(앞으로) 이동시키고, 음수 값은 반대로 멀어지게 합니다.

translateZ() 사용 예제

아래 예제는 검은색 정사각형 div 요소에 perspective와 함께 translateZ를 적용하여 3D 효과를 구현한 코드입니다.

div {
    width: 40px;
    height: 40px;
    background-color: black;
}
.trans {
    transform: perspective(400px) translateZ(100px);
    background-color: orange;
}

코드 설명

위 코드에서 perspective(400px)는 3D 변환의 원근감(깊이감)을 설정하는 필수 요소입니다. perspective 값 없이 translateZ만 사용하면 시각적으로 아무런 변화가 나타나지 않습니다.

translateZ(100px)는 해당 요소를 z축 방향으로 100픽셀 앞으로 이동시킵니다. 결과적으로 주황색(.trans 클래스) 요소가 검은색 원본보다 더 크고 가까워 보이게 되는데, 이는 관찰자에게 다가온 것처럼 렌더링되기 때문입니다.

활용 팁

translateZ는 카드 플립 효과, 3D 갤러리, 패럴랙스 스크롤 등 다양한 인터랙티브 웹 디자인에서 유용하게 활용됩니다. 부모 요소에 transform-style: preserve-3d;를 지정하면 자식 요소들의 3D 변환도 함께 유지할 수 있으니 참고하세요.