[CSS] z-index와 transitionZ의 차이

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다.
CSS에서 요소의 Z축을 설정할 수 있는 두가지 방법이 있습니다. z-index와 transform의 속성인 translateZ가 그 대상인데, translateZ는 z-index에 비해 많이 사용되지 않을 뿐 아니라, 적용도 잘 안되는 경우가 많은데 이 부분에 대해서 얘기해보려고 합니다.

 

z-index

위치 지정 요소와 그 자손 또는 하위 플렉스 아이템의 z축 순서를 지정합니다. z-index 값이 더 클수록 작은 값의 요소 위를 덮는 개념입니다.

auto 키워드 또는 음수와 양수 값을 통해 요소의 우선순위를 지정할 수 있습니다.

 

카르테시안 좌표계

css의 transform 속성 translate에 대해 우선 살펴보면서 Z축이 무엇인지 살펴봅니다. translate는 카르테시안 좌표계를 기준으로 움직입니다. 쉽게 설명하여 x축이 가로 y축이 세로 z축이 높이를 뜻합니다.

하지만 웹 페이지는 2D이기에 Z축의 높이를 활용하는 경우가 그리 많지 않습니다. 일반적인 요소의 z축은 웹브라우저와 사용자사이의 방향인데 z 방향으로 이동한다고 해도 요소가 우리에게 가까워지지 않기 때문입니다.

 

translateZ

div {
	transform: translateZ(100px)
}

Z방향으로 요소의 이동을 지정하는 함수입니다.translateZ를 활용하면 앞서 말한 방법처럼 요소를 Z방향으로 요소를 이동할 수 있습니다.

그리고 저는 이 문법이 겉으로 웹페이지에 티가 나지는 않지만 z-index처럼의 효과를 줄수 있다고 생각했습니다. 하지만 translateZ속성을 통해 요소의 우선순위가 변경이 되지 않았습니다.

 

preserve-3d

놓지고 있었던 부분은 모든 CSS 요소는 기본적으로 평면이라는 점입니다. 이는 tranform-style의 기본값이 flat임을 통해서도 알수 있고, 평면요소에게 Z축을 변경하는 명령은 적용되지 않습니다. 요소에 Z축을 더해 깊이를 더하고 싶다면 preserve-3d 속성을 사용해야 합니다.

div{
	transform-style : preserve-3d;
}

 

내 코드가 잘 적용되어서 3D로 동작하는 지 확인하고 싶다면 높이에 변화를 준 후, 요소를 X축 방향으로 기울인다면 요소의 높이가 나타나는 것을 확인할 수 있습니다.