CSS transform: scale() — 가로·세로·전체 확대축소 비교

 

 

Web Development · CSS Transform

CSS transform: scale() —
가로·세로·전체 확대축소 비교

scaleX(1.2) · scaleY(1.5) · scale(0.7) 세 함수의 차이

시작 오늘 분석할 코드

3개의 액자에 같은 그림이 들어 있다. 각각 호버 시 가로만 1.2배, 세로만 1.5배, 전체적으로 0.7배로 변한다. scale 계열 함수의 차이를 한눈에 보는 코드.

.origin { width: 210px; height: 200px; border: 1px solid black; float: left; margin: 40px; } .scalex:hover { transform: scaleX(1.2); /* 가로 1.2배, 세로는 그대로 */ } .scaley:hover { transform: scaleY(1.5); /* 세로 1.5배, 가로는 그대로 */ } .scale:hover { transform: scale(0.7); /* 가로·세로 0.7배 (축소) */ } <!-- HTML 3개 (동일 구조) --> <div class="origin"> <div class="scalex"><img src="..."></div> </div>

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

🍎

🍎

🍎

scaleX(1.2) — 가로만 1.2배

scaleY(1.5) — 세로만 1.5배

scale(0.7) — 전체 0.7배 축소

용어 용어 정리

scale()가로·세로 동시 배율

scaleX()가로(X축) 방향만 배율

scaleY()세로(Y축) 방향만 배율

1원본 크기 (변화 없음)

>1 (예: 1.2)확대 (1.2배)

<1 (예: 0.7)축소 (70% 크기)

음수 배율반전 (예: -1 = 좌우 뒤집기)

scale(a, b)가로 a, 세로 b 별도 지정

---

1 scale 함수의 3가지 형태

scale, scaleX, scaleY의 관계

세 함수는 같은 변환의 다른 단면이다.

함수	가로 배율	세로 배율	의미
scale(0.7)	0.7	0.7	전체 동일 배율
scale(1.2, 1.5)	1.2	1.5	가로·세로 다른 배율
scaleX(1.2)	1.2	1 (그대로)	가로만
scaleY(1.5)	1 (그대로)	1.5	세로만

/* 모두 같은 결과 */ transform: scaleX(1.2); transform: scale(1.2, 1); transform: scale(1.2) scaleY(0.833...); /* 세로를 1로 만들기 */

---

2 0.7배 축소가 가져오는 시각 효과

scale(0.7)은 너비·높이를 0.7로 만드는 게 아니다

중요한 차이점: width: 70%가 아니라 "렌더링된 결과를 0.7배로 그리는 것"이다. 그래서:

속성	scale(0.7)	width: 70%
실제 박스 크기	그대로 (210×200)	147×140
화면 점유 공간	그대로 (다른 요소 위치 유지)	줄어듦 (다른 요소가 당겨짐)
레이아웃 영향	없음	있음 (reflow)
성능	GPU 가속 가능	CPU reflow

※ 호버 시 부드러운 크기 변화는 transform: scale이 거의 항상 정답이다. width/height transition은 레이아웃 재계산이 들어가 부담이 크다.

---

3 기본 기준점은 중심

scale 후 어디로 자라나?

회전과 마찬가지로 scale도 transform-origin(기본 중심)을 기준으로 작동한다. 즉 중심에서 사방으로 동일하게 커지거나 줄어든다.

기본 (center): scale(2) ┌──┐ ┌──────┐ │ │ → │ │ ← 중심 기준 사방으로 2배 │ │ │ │ └──┘ └──────┘ origin: top left: scale(2) ┌──┐ → ┌──────┐ │ │ │ │ ← 왼쪽 위는 그대로, │ │ │ │ 오른쪽·아래로만 늘어남 └──┘ └──────┘

---

 

반응형

 

4 음수 배율 — 뒤집기

scale(-1)은 거울처럼 뒤집힌다

배율에 음수를 넣으면 해당 축 방향으로 뒤집힌 결과가 나온다.

코드	결과
scaleX(-1)	좌우 뒤집힘 (거울 반사)
scaleY(-1)	위아래 뒤집힘
scale(-1)	가로·세로 모두 뒤집힘 (180도 회전과 결과 동일)
scale(-1.5, 1)	좌우 뒤집고 1.5배 확대

※ scale(-1)은 rotate(180deg)와 결과는 같지만 transition은 다르게 보인다. -1은 한 순간에 뒤집힘, 180deg는 빙 도는 모션.

---

5 폰트와 이미지 — 스케일의 부작용

텍스트가 깨질까?

현대 브라우저는 scale도 GPU에서 부드럽게 처리한다. 단:

※ 큰 배율일 때 주의

• scale(3) 이상은 텍스트가 뿌옇게 보일 수 있음
• 해결: 자식의 font-size를 함께 키우거나, SVG 사용
• 이미지는 작은 원본을 크게 늘리면 픽셀 보임
• 단순 호버(1.05~1.2)는 거의 문제 없음

---

6 scale3d와 scaleZ

3D 변환에서는 Z축 스케일도 가능하다.

transform: scale3d(1.2, 1.5, 2); /* x, y, z 각각 */ transform: scaleZ(2); /* Z축만 */

다만 scaleZ는 평면 요소에는 시각적 효과가 거의 없다 (전후 두께가 0이라). preserve-3d 부모 안의 깊이 있는 자식들에게만 의미가 있다.

---

7 자주 하는 실수

실수	증상	해결
배율 단위 추가 (scale(1.2px))	속성 무시	scale은 단위 없는 숫자만
scale로 크게 했는데 옆 요소 침범	레이아웃 겹침	부모에 padding 또는 z-index
0을 줘서 사라뜨림	완전히 안 보임	의도면 OK, 아니면 0.01 정도
큰 배율로 흐릿한 텍스트	사용자 불만	1.05~1.5 정도로 제한
transition 없이 즉시 변환	호버가 점프	transition: transform .2s

---

8 실무 호버 패턴

/* 카드가 살짝 들어 올려지는 느낌 */ .card { transition: transform 0.2s ease-out, box-shadow 0.2s; } .card:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } /* 버튼 클릭 효과 */ .btn:active { transform: scale(0.95); /* 살짝 작아지며 눌리는 느낌 */ }

1.03~1.05 정도의 작은 scale이 가장 세련된 hover 느낌이다. 너무 크면 산만해진다.

---

핵심 한 줄 요약

scale(n)가로·세로 동시 n배

scaleX(n)가로(X)만 n배 — 세로는 그대로

scaleY(n)세로(Y)만 n배 — 가로는 그대로

1원본 크기 (기준)

음수 배율해당 축 방향으로 뒤집힘

단위 없음px, % 같은 단위 사용 X

실무 호버1.03~1.1 정도가 깔끔함

Tags

#scale #scaleX #scaleY #transform #확대축소 #배율 #호버효과 #음수배율 #거울반전 #transform-origin #CSS3 #인터랙션 #줌 #웹개발 #HTML #티스토리

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

scale, scaleX, scaleY, transform, 확대축소, 배율, 호버효과, 음수배율, 거울반전, transform-origin, CSS3, 인터랙션, 줌, 웹개발, HTML, 티스토리