CSS3 scaleZ() 함수로 Z축 방향 스케일 변환하기

CSS3 scaleZ() – Z축을 활용한 요소 스케일 변환

CSS3의 scaleZ(z) 메서드는 3D 변환 함수 중 하나로, 요소를 Z축 방향으로 확대하거나 축소할 때 사용합니다. X축이나 Y축 변환과 달리 Z축은 화면에서 관찰자 쪽과 멀어지는 방향을 의미하기 때문에, 주로 원근감(perspective)과 함께 활용됩니다.

문법(Syntax)

scaleZ(z)

여기서 z는 요소의 각 좌표에 대해 Z축 방향으로 적용할 배율(scaling factor)을 나타내는 숫자입니다. 예를 들어 값이 2면 Z축 기준으로 두 배, 0.5면 절반 크기로 조정됩니다.

예제 코드

아래 예제는 perspective()와 함께 scaleZ()를 적용하여 요소가 어떻게 다르게 표시되는지 보여줍니다.

div {
   width: 60px;
   height: 60px;
   background-color: black;
}
.perspective {
   transform: perspective(200px) translateZ(-150px);
   background-color: yellow;
}
.scaled-translated {
   transform: perspective(200px) scaleZ(2) translateZ(-150px);
   background-color: orange;
}

코드 설명

.perspective 클래스: perspective(200px)로 원근감을 부여한 뒤, translateZ(-150px)를 통해 요소를 화면 안쪽(Z축 음의 방향)으로 150px 이동시킵니다. 그 결과 노란색 요소는 실제보다 작고 멀리 있는 것처럼 보입니다.

.scaled-translated 클래스: 동일한 원근 설정에서 scaleZ(2)를 먼저 적용합니다. Z축 배율이 2배가 된 상태에서 뒤로 이동하기 때문에, 주황색 요소는 노란색 요소와 다른 깊이 효과를 가지게 됩니다.

참고: scaleZ()는 단독으로 사용하면 시각적으로 변화가 거의 없습니다. Z축은 관찰자를 향한 방향이므로, perspective()나 translateZ() 같은 다른 3D 변환과 함께 사용해야 입체적인 효과를 확인할 수 있습니다.