CSS3에서 x축, y축, z축을 활용한 요소 변환 방법

CSS3 translate3d() 메서드로 요소 변환하기

CSS3의 translate3d(x, y, z) 메서드를 사용하면 요소를 x축, y축, z축 세 방향으로 동시에 이동시켜 입체적인 변환 효과를 만들 수 있습니다. 일반적인 2D 변환과 달리 z축 값이 추가되어 원근감(perspective)이 있는 3D 애니메이션 구현이 가능합니다.

기본 문법

translate3d(tx, ty, tz)

매개변수 설명

tx: 이동 벡터의 x좌표(가로 방향)를 나타내는 <length> 값입니다.
ty: 이동 벡터의 y좌표(세로 방향)를 나타내는 <length> 값입니다.
tz: 이동 벡터의 z축 성분(화면 앞뒤 방향)을 나타내는 <length> 값입니다.

각 매개변수에는 px, em 등의 길이 단위를 사용할 수 있으며, 음수 값을 지정하면 반대 방향으로 이동합니다.

사용 예제

다음 예제는 주황색 사각형 요소에 perspective와 함께 translate3d를 적용하여 검은색으로 변경하고 x축 방향으로 이동시키는 코드입니다.

div {
   width: 50px;
   height: 50px;
   background-color: orange;
}
.trans {
   transform: perspective(300px) translate3d(15px, 0, 0px);
   background-color: black;
}

참고 사항

translate3d를 사용할 때 perspective() 함수를 함께 적용하면 z축 이동에 따른 원근감이 자연스럽게 표현됩니다. 또한 브라우저는 translate3d를 감지하면 GPU 가속을 활성화하기 때문에, 복잡한 애니메이션에서 렌더링 성능을 향상시키는 데에도 유용합니다.