CSS transform: translate() — X축·Y축·동시 이동의 차이

 

 

Web Development · CSS Transform

CSS transform: translate() —
X축·Y축·동시 이동

translateX(50px) · translateY(20px) · translate(10px, 20px) 비교

시작 오늘 분석할 코드

3개의 박스에 같은 그림이 들어 있고, 호버 시 오른쪽으로 50px / 아래로 20px / 둘 다 약간씩 이동한다. translate 계열 함수의 차이를 한눈에 비교하는 코드.

.origin { width: 200px; height: 134px; border: 1px solid black; float: left; margin: 40px; } .movex:hover { transform: translateX(50px); /* 오른쪽으로 50 */ } .movey:hover { transform: translateY(20px); /* 아래로 20 */ } .movexy:hover { transform: translate(10px, 20px); /* 동시에 */ } <!-- HTML 3개 (동일 구조) --> <div class="origin"> <div class="movex"><img src="..."></div> </div>

실제 출력 미리보기 (각 액자에 마우스를 올려보세요)

🚌

🚌

🚌

translateX(50px) — 오른쪽으로

translateY(20px) — 아래로

translate(10px, 20px) — 대각선

용어 용어 정리

translate"이동" — 위치를 평행이동

translateX가로(X축) 이동만

translateY세로(Y축) 이동만

translate(a, b)X와 Y 동시 이동

+ 양수오른쪽 / 아래

- 음수왼쪽 / 위

px절대 픽셀 단위

%자기 자신의 가로/세로 기준

---

1 CSS의 좌표는 "왼쪽 위가 (0, 0)"

왜 양수가 오른쪽·아래인가?

수학에서는 보통 Y축의 양수가 위쪽이다. 하지만 컴퓨터 화면(CSS 포함)은 왼쪽 위 모서리가 원점이고 아래로 갈수록 Y가 증가한다.

(0,0)

 

 

+X →

+Y ↓

 

 

 

 

 

translateX( 50px) → 오른쪽으로 50 translateX(-50px) → 왼쪽으로 50 translateY( 20px) → 아래로 20 translateY(-20px) → 위로 20

---

2 translate()는 위치만 바꿀 뿐 레이아웃은 그대로

왜 다른 요소가 밀리지 않는가?

CSS의 transform은 "렌더링된 결과를 옮기는 것"이지, 박스의 실제 위치를 바꾸는 게 아니다. 그래서 옆 형제 박스는 영향을 받지 않는다.

방법	레이아웃 영향	형제 영향	성능
transform: translate(50px, 0)	없음	없음	GPU 가속 ◎
margin-left: 50px	있음	형제가 밀림	reflow ✗
position: relative + left: 50px	없음	없음	괜찮음
position: absolute	흐름에서 빠짐	형제 위로/아래로 흐름	괜찮음

※ 부드러운 호버 이동에는 transform: translate가 거의 항상 정답이다. margin 변경은 reflow를 일으켜 큰 페이지에서 끊긴다.

---

3 translate(a, b) — 한 번에 X와 Y 둘 다

단축형으로 더 짧게

translate(10px, 20px)은 translateX(10px) translateY(20px)과 같다. 둘 다 동시에 이동하므로 결과 동일.

/* 모두 같은 결과 */ transform: translate(10px, 20px); transform: translateX(10px) translateY(20px); transform: translateY(20px) translateX(10px); /* 평행이동은 순서 무관 */ transform: translate3d(10px, 20px, 0); /* GPU 명시 */

단, 회전이나 scale과 함께 쓰면 순서가 중요해진다. translate가 먼저면 "이동 후 회전", 회전이 먼저면 "회전 후 이동".

---

 

반응형

 

4 단위 — px, %, em 등

%의 특별한 의미

translate에서 %는 자기 자신의 크기 기준이다.

/* 박스 크기가 100x50일 때 */ transform: translateX(50%); → 오른쪽으로 50px (자기 너비의 50%) transform: translateY(50%); → 아래로 25px (자기 높이의 50%) transform: translate(50%, 50%); → 자기 중심을 원래 자리에 둠

※ 자주 쓰이는 패턴 — 정중앙 정렬

• position: absolute로 부모의 (50%, 50%)에 두면 박스의 왼쪽 위가 부모 가운데에 옴
• 여기에 translate(-50%, -50%)를 더하면 박스의 중심이 부모 가운데에 옴
• 박스 크기를 몰라도 정중앙 정렬 가능

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

---

5 translate3d와 translateZ

3D 변환에서는 Z축 이동도 가능하다.

transform: translateZ(50px); /* 화면 안쪽에서 50px 앞으로 */ transform: translate3d(10px, 20px, 30px); /* x, y, z 동시 */

축	+ 방향	- 방향
X	오른쪽	왼쪽
Y	아래	위
Z	화면 밖(시청자 쪽)	화면 안(멀어짐)

※ translateZ는 부모에 perspective가 있어야 진짜 3D로 보인다. 없으면 +Z만큼 이동해도 시각적 변화가 없다.

※ translate3d는 GPU 강제 활성화 트릭

• 2D 이동만 하더라도 translate3d(10px, 20px, 0)로 쓰면 브라우저가 GPU 레이어로 분리
• scroll·애니메이션 성능이 좋아짐
• 현대 브라우저는 자동 최적화하지만, 강제하려면 명시

---

6 자주 하는 실수

실수	증상	해결
단위 없이 숫자만 (50)	속성 무시	반드시 px / % / em 등
transform이 아닌 left/top 변경	reflow로 끊김	transform: translate 권장
translate 후 부모 영역 벗어남	잘리거나 스크롤 발생	부모 overflow 확인
%의 기준 혼동	예상보다 적게/많이 이동	%는 자기 크기 기준
회전과 순서 잘못	의도와 다른 동작	translate 먼저 → 회전 = 평행이동 후 회전

---

7 호버 패턴 — 살짝 위로 떠오르는 카드

.card { transition: transform 0.2s ease-out, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); /* 살짝 위로 */ box-shadow: 0 8px 16px rgba(0,0,0,0.1); }

4~8px 정도 위로 살짝 띄우는 이 패턴이 가장 흔한 카드 호버 효과다. translateY(-px)로 띄우고 그림자를 늘려 입체감을 더한다.

---

8 translate vs position

transform: translate

• 레이아웃 영향 없음
• GPU 가속
• animation·transition에 최적
• 일시적 이동에 적합

position: top/left

• 실제 위치를 옮김
• reflow 발생 가능
• 정적 배치에 더 자연스러움
• JS로 좌표 계산 시 더 직관적

---

핵심 한 줄 요약

translateX(n)가로(X)로 n만큼 이동 — +오른쪽 / -왼쪽

translateY(n)세로(Y)로 n만큼 이동 — +아래 / -위

translate(a,b)X와 Y 동시 이동

% 단위자기 자신의 크기 기준

레이아웃 영향없음 — 형제 그대로

정중앙 정렬left/top 50% + translate(-50%, -50%)

translate3dGPU 강제 활성화 — 큰 애니메이션 권장

Tags

#translate #translateX #translateY #translate3d #transform #이동 #위치이동 #정중앙정렬 #가운데정렬 #GPU #하드웨어가속 #percent #CSS3 #인터랙션 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

translate, translateX, translateY, translate3d, transform, 이동, 위치이동, 정중앙정렬, 가운데정렬, GPU, 하드웨어가속, percent, CSS3, 인터랙션, 웹개발, HTML, 티스토리