CSS transform: rotate() — 양수 vs 음수 각도, 시계와 반시계

 

 

Web Development · CSS Transform

CSS transform: rotate() —
양수와 음수, 시계와 반시계

+20deg와 -40deg가 어떻게 다른 방향으로 도는가

시작 오늘 분석할 코드

같은 그림 두 장을 호버하면 한 장은 rotate(20deg)로 시계 방향, 다른 장은 rotate(-40deg)로 반시계 방향으로 돈다. 각도의 부호가 회전 방향을 바꾼다는 핵심을 보여주는 코드.

.origin { width: 210px; height: 200px; border: 1px solid black; float: left; margin: 40px; } .rotate1:hover { transform: rotate(20deg); } .rotate2:hover { transform: rotate(-40deg); } <!-- HTML --> <div class="origin"> <div class="rotate1"> <img src="images/fruit.jpg"> </div> </div> <div class="origin"> <div class="rotate2"> <img src="images/fruit.jpg"> </div> </div>

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

🍎

🍎

+20deg (시계방향)

-40deg (반시계 방향, 더 큼)

용어 용어 정리

rotate()평면 회전 함수 (= rotateZ)

degdegree(도) — 0~360 사이로 흔히 사용

+ (양수)시계 방향 (clockwise)

- (음수)반시계 방향 (counter-clockwise)

rad라디안 — 2π = 360deg

turn바퀴수 — 1turn = 360deg

grad그라드 — 400grad = 360deg

기준점기본은 요소 중심 (transform-origin)

---

1 회전 방향 — 양수는 왜 시계인가?

CSS 좌표계의 약속

수학에서 양수 각도는 보통 반시계 방향이지만, 컴퓨터 그래픽(CSS 포함)에서는 Y축이 아래로 향하기 때문에 양수가 시계 방향이 된다.

수학: +각도 → 반시계 (Y축이 위) CSS: +각도 → 시계 (Y축이 아래)

 

0deg ↑

90deg →

180deg ↓

270deg ←

---

2 +20deg vs -40deg — 회전 후 위치

각도	방향	회전량	이미지가 향하는 곳
0deg	(없음)	0	똑바로 위
+20deg	시계방향	1/18 바퀴	오른쪽으로 약간 기울어짐
-40deg	반시계 방향	1/9 바퀴	왼쪽으로 더 크게 기울어짐

※ 절댓값 비교: |-40| = 40 > |+20| = 20 → 두 번째 박스가 더 많이 기울어진다. 부호는 방향만, 크기는 절댓값이 결정한다.

---

3 rotate vs rotateZ — 같은 평면 회전

2D rotate와 3D rotateZ의 결과 동일

이번 코드는 rotate()를 썼지만 rotateZ()로 바꿔도 결과는 똑같다. 둘 다 화면을 뚫는 Z축을 기준으로 도는 것이라 평면에서는 구분이 없다.

/* 모두 동일한 평면 회전 */ transform: rotate(20deg); transform: rotateZ(20deg); transform: rotate3d(0, 0, 1, 20deg); /* Z축으로 명시 */

---

4 360을 넘어가면 어떻게 되나?

540deg와 180deg는 도착이 같지만 도는 모습이 다르다

각도를 큰 값으로 줘도 유효하다. 다만 transition과 함께 쓸 때만 차이가 보인다.

각도	도착 위치	transition 시 보이는 동작
180deg	거꾸로 (½바퀴)	180도까지 직접 회전
540deg	거꾸로 (½바퀴, 동일)	540도 회전 = 1바퀴 + 180 (한 바퀴 더 돔)
720deg	똑바로 (2바퀴)	완전히 두 바퀴 도는 모션
-90deg	왼쪽 90도	반시계 ¼바퀴
270deg	왼쪽 90도와 동일	시계 ¾바퀴 (다른 길로 도착)

※ 호버 시 한 바퀴 도는 효과를 원한다면 rotate(360deg)처럼 큰 값을 주면 됨. 단, 도착이 0deg와 같아 시각적으로는 처음과 똑같이 보임.

---

반응형

5 회전 기준점은 기본이 중심

transform-origin을 안 적으면 요소의 정중앙(50% 50%)이 회전 축이다. 이번 코드도 origin을 안 줬으니 그림의 한가운데가 핀.

기본 (center): rotate(20deg) ┌─────┐ ┌──────┐ │ ✦ │ → 회전 → /│ ✦ / │ │ └──────┘ └─────┘ ↘ 약간 기울어짐

---

6 transition을 추가하면 회전이 부드럽다

현재 코드는 즉시 회전 — transition 추가가 권장됨

이번 원본 코드에는 transition이 없어서 호버 시 즉시 20deg/-40deg로 점프한다. 부드러움을 원하면:

.rotate1, .rotate2 { transition: transform 0.5s ease; } .rotate1:hover { transform: rotate(20deg); } .rotate2:hover { transform: rotate(-40deg); }

이 미리보기에서는 학습 편의를 위해 transition: transform 0.5s ease를 추가했기 때문에 부드럽게 도는 게 보인다.

---

7 자주 하는 실수

실수	증상	해결
각도에 단위 누락 (rotate(20))	속성 무시	반드시 deg/rad/turn 등 단위
회전 후 옆 요소와 겹침	레이아웃 깨짐	부모에 충분한 padding 또는 overflow:hidden
transform-origin 안 둠	중심 기준 회전이라 의도와 다를 수 있음	의도가 모서리면 left top 등 명시
transition 미설정	호버가 즉시 점프	기본 셀렉터에 transition 추가
음수 부호 빠뜨림	방향 반대로	의도가 반시계면 - 반드시 명시

---

8 다른 단위로 표현하면

/* 모두 같은 회전 (90도) */ transform: rotate(90deg); transform: rotate(0.25turn); transform: rotate(1.5708rad); transform: rotate(100grad);

실무에서는 deg가 가장 직관적이라 거의 항상 사용된다. turn은 무한 회전 같은 표현을 깔끔하게 쓸 때 유용하다(예: 1turn = 한 바퀴).

---

핵심 한 줄 요약

rotate()평면(2D) 회전 — Z축 기준

+각도시계 방향 (CSS 좌표계 약속)

-각도반시계 방향

절댓값크기 = 회전량 (방향과 별개)

기본 기준점요소 중심 (50% 50%)

단위 필수deg / rad / turn / grad

+360 회전한 바퀴 더 돈 후 같은 위치 — 모션은 보임

Tags

#rotate #transform #2D회전 #시계방향 #반시계방향 #양수각도 #음수각도 #deg #rad #turn #grad #transform-origin #CSS3 #회전 #웹개발 #HTML #티스토리

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

rotate, transform, 2D회전, 시계방향, 반시계방향, 양수각도, 음수각도, deg, rad, turn, grad, transform-origin, CSS3, 회전, 웹개발, HTML, 티스토리