CSS rotate3d — rotateX·Y·Z와 임의 축 3D 회전

 

 

Web Development · CSS 3D Transform

CSS rotate3d —
X·Y·Z 단일 축 그리고 임의 축 3D 회전

rotateX·rotateY·rotateZ와 rotate3d(x,y,z,angle)의 차이

시작 오늘 분석할 코드

같은 그림을 4개 박스에 넣고, 각각 rotateX, rotateY, rotateZ, rotate3d로 45도 돌려본다. 부모에 perspective: 200px이 있어서 3D 회전이 진짜 입체적으로 보인다.

.origin { width: 210px; height: 200px; margin: 56px; float: left; border: 1px solid black; perspective: 200px; /* 3D 원근감 */ } .rotatex { transform: rotateX(45deg); } .rotatey { transform: rotateY(45deg); } .rotatez { transform: rotateZ(45deg); } .rotatexyz { transform: rotate3d(2.5, 1.2, -1.5, 45deg); } <!-- HTML 4개 (동일 구조) --> <div class="origin"> <div class="rotatex"><img src="images/fruit.jpg"></div> </div>

실제 출력 미리보기

🍎

🍎

🍎

🍎

rotateX(45deg) — 위가 멀어짐

rotateY(45deg) — 오른쪽이 멀어짐

rotateZ(45deg) — 평면에서 ⅛바퀴

rotate3d(2.5, 1.2, -1.5, 45deg)

용어 용어 정리

rotateXX축(가로축) 기준 회전 — 위아래

rotateYY축(세로축) 기준 회전 — 좌우

rotateZZ축(화면 안쪽) 기준 회전 — 평면

rotate3dx,y,z 벡터로 임의 축 회전

perspective시청자~요소 거리 (3D 원근)

200px (가까움)왜곡이 강한 원근

단위 벡터(1,0,0) = X축, (0,1,0) = Y축

정규화브라우저가 벡터 길이를 1로 자동 보정

---

1 3D 좌표축 — X·Y·Z의 정체

컴퓨터 화면에서의 3D 좌표

웹의 3D는 화면을 기준으로 다음과 같이 정의된다.

Y축 (세로↓) │ │ └────── X축 (가로→) / / Z축 (화면 안→밖)

축	방향	회전 시 효과
X축	화면 가로 (수평선)	위아래가 자리를 바꿈 (앞으로 고개 숙이기)
Y축	화면 세로 (수직선)	좌우가 자리를 바꿈 (책장 넘기기)
Z축	화면 안쪽으로	평면에서 빙글빙글 (시계바늘)

---

2 박스 1·2·3 — 각 축 단독 회전

왜 결과가 모두 다른가?

같은 45도라도 어느 축으로 도는지에 따라 모양이 완전히 달라진다.

회전	보이는 모양	설명
rotateX(45deg)	위쪽이 뒤로 누움	가로축을 핀으로 삼고 윗변이 멀어짐
rotateY(45deg)	오른쪽이 뒤로 누움	세로축을 핀으로 삼고 오른쪽 변이 멀어짐
rotateZ(45deg)	평면에서 45도 기울어짐	그냥 마름모처럼 보임 (= rotate)

※ 박스 3 (rotateZ)만 평면 회전이라 perspective 효과가 안 보인다 — Z축은 화면을 뚫는 방향이라 깊이감이 생기지 않는다.

---

3 박스 4 — rotate3d(x, y, z, angle)

임의 방향 축으로 한 번에 회전

rotate3d는 가장 일반화된 회전 함수다. 처음 3개의 숫자가 회전축의 방향 벡터이고, 마지막이 회전 각도.

rotate3d(2.5, 1.2, -1.5, 45deg) ─┬─ ─┬─ ─┬─ ─┬─ x y z angle → "(2.5, 1.2, -1.5) 방향의 축을 중심으로 45도 회전"

※ 벡터의 크기는 중요하지 않다

• (2.5, 1.2, -1.5)와 (5, 2.4, -3)은 같은 방향 → 같은 회전 결과
• 브라우저가 자동으로 정규화(길이 1로 만듦)
• 중요한 건 x:y:z 비율과 부호

---

 

반응형

 

4 rotate3d로 X·Y·Z 단일 회전을 표현하면

rotate3d는 다른 회전 함수의 일반형이다. 다음은 모두 동일.

단축형	rotate3d 형태	회전축
rotateX(45deg)	rotate3d(1, 0, 0, 45deg)	X축만
rotateY(45deg)	rotate3d(0, 1, 0, 45deg)	Y축만
rotateZ(45deg)	rotate3d(0, 0, 1, 45deg)	Z축만
(없음)	rotate3d(1, 1, 0, 45deg)	X와 Y의 대각선 축

---

5 perspective: 200px의 의미

왜 부모에 perspective를 줘야 하나?

perspective는 관찰자와 화면(z=0 평면) 사이의 거리를 가정한다. 200px이면 관찰자가 화면 200px 앞에 있다는 뜻 — 매우 가까이서 보는 셈이라 왜곡이 강하다.

perspective: 200px → 가까이서 — 강한 원근, 큰 왜곡 perspective: 600px → 적당한 거리 — 자연스러운 입체감 perspective: 1500px → 멀리서 — 약한 원근, 살짝 입체감 (없음) → 평면적 (3D 회전이 평면 변환처럼 보임)

※ 200px은 학습용으로는 효과가 잘 보이지만, 실무에선 너무 강한 왜곡이라 부자연스럽다. 일반적으로 600~1200px이 권장된다.

---

6 회전 후 위치가 화면 밖으로 나갈 수도

3D 회전 시 일부분이 부모 영역을 벗어날 수 있다. 박스 4의 비대칭 회전이 가장 그렇다.

※ 깔끔하게 보이려면 부모(.origin)에 overflow: hidden을 주거나, 자식 요소에 충분한 여백(margin)을 둔다. 단, overflow:hidden은 preserve-3d와 충돌할 수 있어 주의.

---

7 자주 하는 실수

실수	증상	해결
perspective를 회전하는 요소 자신에 줌	3D 효과 안 보임	부모 또는 함수 형태로 사용
perspective 값이 너무 작음 (50px)	형태가 깨질 정도로 왜곡	500~1500px 권장
rotate3d 첫 3개 모두 0	축이 없어 회전 못함	적어도 하나는 0이 아닌 값
축 벡터에 단위 (45px) 작성	속성 무시	벡터는 단위 없는 숫자만
각도에 단위 누락	속성 무시	반드시 deg/rad/turn

---

8 rotate3d의 활용 예

/* 책 페이지 넘기는 효과 (Y축 + 약간의 X축) */ transform: rotate3d(0.2, 1, 0, -180deg); /* 카드 던지듯 회전하며 사라짐 */ @keyframes throw { to { transform: rotate3d(1, 1, 1, 720deg) translate(500px, 200px); } } /* 깃발 펄럭이는 듯한 회전 */ transform: rotate3d(0, 0.5, 0.1, 15deg);

일반적인 카드 뒤집기 등은 rotateY(180deg)면 충분하지만, 비스듬한 회전이나 한 번에 다축 회전이 필요하면 rotate3d가 답.

---

9 합성과 비교

rotate3d와 다중 단일 회전 합성은 결과가 다를 수 있다. 회전 순서가 영향을 주기 때문.

/* 다른 결과 */ transform: rotate3d(1, 1, 0, 45deg); /* 한 번에 대각선 축 회전 */ transform: rotateX(45deg) rotateY(45deg); /* X 먼저, Y 나중 (다른 결과) */

※ rotate3d는 "단일 회전"이고, 합성은 "두 번 연속 회전"이다. 단일 회전이 보통 더 자연스럽고 transition도 깔끔하다.

---

핵심 한 줄 요약

rotateX가로축 회전 — 위아래 뒤집힘

rotateY세로축 회전 — 좌우 뒤집힘

rotateZ평면 회전 (= rotate)

rotate3d(x,y,z,a)임의 방향 축 a도 회전

벡터방향만 의미 — 크기는 자동 정규화

perspective부모에 둬야 진짜 3D로 보임

실무 권장 거리600~1200px (200은 너무 강함)

Tags

#rotate3d #rotateX #rotateY #rotateZ #transform #3D회전 #perspective #회전축 #벡터회전 #transform-style #preserve-3d #CSS3 #카드플립 #웹개발 #HTML #티스토리

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

rotate3d, rotateX, rotateY, rotateZ, transform, 3D회전, perspective, 회전축, 벡터회전, transform-style, preserve-3d, CSS3, 카드플립, 웹개발, HTML, 티스토리