CSS transform-origin — 같은 회전, 다른 모서리 기준 4가지

 

 

Web Development · CSS Transform

CSS transform-origin —
같은 회전, 다른 4모서리 기준

left top · right top · left bottom · right bottom

시작 오늘 분석할 코드

똑같이 rotateZ(10deg)로 10도 기울어진 같은 그림 4장이지만, 회전의 기준점(축)을 4모서리 각각에 둔 결과를 비교한다. 같은 각도라도 기준점이 어디냐에 따라 회전 후 위치가 완전히 달라진다.

.origin { width: 160px; height: 240px; border: 1px solid black; float: left; margin: 40px; } .rose { transform: rotateZ(10deg); /* 모두 동일 회전 */ } .ltop .rose { transform-origin: left top; } .rtop .rose { transform-origin: right top; } .lbottom .rose { transform-origin: left bottom; } .rbottom .rose { transform-origin: right bottom; } <!-- HTML 구조 --> <div class="origin"> <div class="ltop"> <img src="images/rose.jpg" class="rose"> </div> </div> <!-- rtop, lbottom, rbottom 도 같은 구조로 4개 -->

실제 출력 미리보기 (이미지 대신 placeholder 사용, 빨간 점이 회전 기준점)

 

🌹

 

🌹

 

🌹

 

🌹

left top — 왼쪽 위 핀

right top — 오른쪽 위 핀

left bottom — 왼쪽 아래 핀

right bottom — 오른쪽 아래 핀

용어 용어 정리

transform-origin변환의 기준점 (회전·확대 중심)

기본값50% 50% = center center

left / right가로 0% / 100% (요소 너비 기준)

top / bottom세로 0% / 100% (요소 높이 기준)

rotateZZ축 회전 = 평면 회전 (= rotate)

10deg시계방향 10도 — 살짝 기울임

픽셀 값30px 50px처럼 정확한 위치도 가능

3D 시 Z값3번째 값으로 깊이축 기준점

---

1 transform-origin은 "회전축이 박힌 위치"

왜 같은 10도인데 4장이 모두 다른 곳으로 가나?

회전은 "한 점을 고정하고 그 주위로 도는 것"이다. 그 고정점이 어디냐에 따라, 같은 각도로 돌아도 도형이 끝나는 위치가 달라진다.

예: 직사각형이 시계방향 10도 회전 기준점이 왼쪽 위: ┌─────┐ ↘ ↘ 핀(왼쪽 위) │ 그림 │ → ┌─────┐ ← 그 자리는 그대로, │ │ │ 그림 │ 다른 모서리들이 시계방향으로 떠남 └─────┘ └─────┘ 기준점이 오른쪽 아래: ┌─────┐ ┌─────┐ │ 그림 │ → /│ 그림 │ │ │ / │ │ ← 핀(오른쪽 아래)는 고정, └─────┘ └─────┘ 왼쪽이 위로 떠오름

---

2 4가지 키워드 매칭

클래스	transform-origin	의미 (가로 / 세로)	퍼센트로
.ltop	left top	맨 왼쪽 / 맨 위	0% 0%
.rtop	right top	맨 오른쪽 / 맨 위	100% 0%
.lbottom	left bottom	맨 왼쪽 / 맨 아래	0% 100%
.rbottom	right bottom	맨 오른쪽 / 맨 아래	100% 100%
(생략)	center center	가운데 / 가운데 (기본)	50% 50%

※ 두 값을 적을 때 첫 번째는 가로(X), 두 번째는 세로(Y). 키워드 대신 30px 80%처럼 픽셀과 퍼센트를 섞어도 된다.

---

3 rotateZ vs rotate

왜 코드에서 rotateZ를 썼나?

rotate(10deg)와 rotateZ(10deg)는 2D에서는 동일한 결과를 낸다. 평면 회전이기 때문. 차이는:

rotate(10deg)

• 2D 변환 함수
• 표준 가장 짧은 형태
• 일반적인 평면 회전

rotateZ(10deg)

• 3D 변환 함수 (Z축 명시)
• 다른 3D 함수와 함께 쓸 때 명확
• 의도 표현이 분명함

이 코드처럼 단순 평면 회전만 쓴다면 rotate로도 충분하지만, rotateX·rotateY와 함께 묶어 쓸 때를 위해 rotateZ로 통일하는 코드 스타일이 있다.

---

4 .origin 안의 .ltop은 왜 따로 있나?

.origin이 그림틀, .ltop/.rtop 등이 회전 컨텍스트

HTML 구조를 보면 .origin(액자) → .ltop(회전 위치 클래스) → img.rose(이미지) 3단 중첩이다. .ltop은 img.rose에 어떤 transform-origin을 줄지를 결정하는 셀렉터 역할만 한다.

.ltop .rose { transform-origin: left top; } ↑ ↑ 부모 클래스 진짜 적용되는 자식

이 패턴 덕분에 같은 .rose CSS를 4개 다른 위치에 적용할 수 있다. 실무에선 .rose에 직접 클래스를 더 붙여 .rose.ltop으로 줄이는 방법도 있다.

---

반응형

5 픽셀·퍼센트로 정밀하게

키워드만 쓰지 않아도 된다

키워드(left/right/top/bottom/center)는 4모서리·중심·변 중간 9곳만 가능. 더 세밀한 위치는 숫자로 줄 수 있다.

transform-origin: 30px 50px; /* 왼쪽에서 30, 위에서 50 */ transform-origin: 25% 75%; /* 가로 ¼, 세로 ¾ */ transform-origin: 0 50%; /* 왼쪽 변의 중간점 */ transform-origin: center 0; /* 윗변 중앙 = top center */ transform-origin: 50% 50% 100px; /* 3D — Z축 100px 위에 핀 */

---

6 회전 외에도 적용된다

transform-origin은 회전뿐만 아니라 scale, skew, perspective 등 모든 transform의 기준점이다.

변환 종류	origin이 left top일 때
scale(2)	왼쪽 위 모서리는 그대로, 오른쪽·아래로만 2배 커짐
skewX(20deg)	왼쪽 위가 고정되고 오른쪽·아래가 비스듬해짐
rotateZ(45deg)	왼쪽 위를 핀으로 시계방향 45도

---

7 자주 하는 실수

실수	증상	해결
transform-origin을 transform 뒤에 작성	일부 브라우저에서 무시 (낡은 사양)	transform-origin을 먼저 적기
키워드 순서 바꿈 (top left)	사실 가능 — 가독성 떨어짐	가로 → 세로 순으로 통일
회전 기준이 바뀌었는데 위치도 바뀜	레이아웃이 의도와 다름	position/translate으로 보정
img.rose가 인접한 형제와 겹침	회전 후 다른 박스 침범	부모 .origin에 overflow:hidden
3D에 origin Z값을 0으로 둠	예상보다 평평한 회전	입체감을 위해 Z값도 조정

---

8 실무 팁 — 자주 쓰는 패턴

※ 메뉴·서랍 펼침

• transform-origin: top center + transform: scaleY(0) → 1
• 위에서 아래로 펼쳐지는 자연스러운 드롭다운

※ 책장 넘김 효과

• transform-origin: left center + rotateY(0 → -180deg)
• 책 페이지가 왼쪽 끝에서 넘어가는 모양

※ 풍선 부풀어 오름

• transform-origin: bottom center + scale(0 → 1)
• 아래쪽 끈에서 풍선이 위로 부풀어 올라가는 느낌

---

핵심 한 줄 요약

transform-origin변환의 기준점 — "핀이 박힌 위치"

기본값center center (50% 50%)

left/right가로 0% / 100%

top/bottom세로 0% / 100%

픽셀·퍼센트정밀한 위치 지정 가능

rotateZ ≡ rotate2D 평면 회전 — 결과 동일

scale·skew에도 적용모든 transform이 이 점을 기준으로

Tags

#transform-origin #transform #rotate #rotateZ #scale #skew #변환기준점 #center #left #right #top #bottom #percent #회전축 #CSS3 #웹개발 #HTML #티스토리

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

transform-origin, transform, rotate, rotateZ, scale, skew, 변환기준점, center, left, right, top, bottom, percent, 회전축, CSS3, 웹개발, HTML, 티스토리