• 목록

CSS 트랜스폼 translate() 함수

translate() 함수는 요소를 현재 위치에서 X축(가로) 또는 Y축(세로) 방향으로 이동시킬 때 사용합니다. 

레이아웃의 흐름(Normal Flow)을 깨지 않으면서 시각적인 위치만 옮기기 때문에 애니메이션 구현 시 성능이 매우 뛰어납니다.

1. 기본 문법

transform: translate(x, y); 형태로 작성하며, 단위는 px, %, em, rem 등을 사용할 수 있습니다.

• x: 가로 방향 이동 거리 (양수는 오른쪽, 음수는 왼쪽)

• y: 세로 방향 이동 거리 (양수는 아래쪽, 음수는 위쪽)

2. 세부 함수

특정 방향으로만 이동시키고 싶을 때 개별 함수를 사용하면 가독성이 좋아집니다.

• translateX(n): 가로축으로만 이동

• translateY(n): 세로축으로만 이동

• translateZ(n): Z축(앞뒤)으로 이동 (3D 환경 및 perspective 설정 시 유효)

• translate3d(x, y, z): 세 축의 이동을 한 번에 정의

3. 주요 특징 및 팁

• 주변 요소에 영향 없음: top, left 속성과 달리 요소를 이동시켜도 다른 요소들이 밀려나지 않습니다. 오직 시각적인 위치만 변합니다.

• 퍼센트(%) 단위의 기준: translate에서 % 단위를 사용하면 요소 자기 자신의 크기를 기준으로 계산됩니다.

  • 예: width: 200px;인 요소에 translateX(50%)를 주면 오른쪽으로 100px 이동합니다.

• 중앙 정렬 공식: 요소를 부모의 정중앙에 배치할 때 자주 쓰이는 기법입니다.

  CSS

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 자신의 절반만큼 다시 끌어와 정확한 중앙 배치 */
  }
  

4. 성능 최적화 (GPU 가속)

translate는 브라우저의 GPU(그래픽 카드)를 사용하여 렌더링을 처리합니다. 

따라서 top, margin 등을 이용해 위치를 옮기는 것보다 훨씬 부드러운 애니메이션(60fps)을 구현할 수 있습니다.

• 목록