왕진 블로그
반응형
Web Development · CSS Transform
CSS transform 함수 합성 —
scale · perspective · rotateX 한 줄에
한 transform 속성에 함수 3개를 늘어놓으면 무엇부터 적용되는가
시작 오늘 분석할 코드
호버하면 박스가 커지면서 X축으로 뒤집히는데, 원근감(perspective)까지 들어간 3D 효과가 나타난다. transform 한 속성 안에 함수 3개를 합성해 넣은 게 핵심.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Transform</title> <style> div { width: 100px; height: 100px; margin: 100px; background: #0094ff; } .box { transition: 2s ease-in; } .box:hover { transform: scale(2) perspective(120px) rotateX(180deg); } </style> </head> <body> <div class="box"></div> </body> </html>
실제 출력 미리보기 (마우스를 박스에 올려보세요)
2배로 커지면서 X축을 기준으로 위아래가 뒤집힘 — 원근감 있는 3D 회전
용어 용어 정리
scale(2)크기 2배 (가로·세로 동일 배율)
perspective()원근감 — 시청자와 요소 사이 거리
rotateXX축(가로축) 기준 회전 — 위아래 뒤집힘
rotateYY축 회전 — 좌우 뒤집힘 (이번 코드 X)
rotateZZ축 회전 — 평면 회전 (= rotate)
3D 변환화면 평면을 넘어 깊이까지 다루는 변형
120px (perspective)시청자가 120px 떨어진 곳에서 본다는 뜻
함수 합성한 transform에 여러 함수를 공백으로 나열
1 transform에 함수 3개를 같이 넣을 수 있다
왜 한 줄에 모는가? 따로 쓰면 안 되나?
transform은 한 속성이라, 두 번 적으면 마지막 것만 남고 앞은 사라진다. 그래서 여러 효과를 동시에 주려면 한 줄에 모두 적어야 한다.
/* X: 마지막 transform만 적용됨 */ .box:hover { transform: scale(2); transform: rotateX(180deg); /* ← 이것만 살아남음 */ } /* O: 함수를 공백으로 나열 → 모두 적용 */ .box:hover { transform: scale(2) perspective(120px) rotateX(180deg); }
2 함수의 적용 순서가 중요하다
왼쪽이 먼저? 오른쪽이 먼저?
CSS transform은 오른쪽에서 왼쪽 순서로 적용된다. 즉 이번 코드는:
transform: scale(2) perspective(120px) rotateX(180deg); ③ ② ① ↑ ↑ ↑ 마지막 중간 먼저
| 순서 | 함수 | 이 시점의 박스 상태 |
|---|---|---|
| ① 먼저 | rotateX(180deg) |
X축 기준 위아래 180도 뒤집힘 (뒷면이 보임) |
| ② 다음 | perspective(120px) |
120px 거리에서 본 원근감 부여 (가까울수록 왜곡 큼) |
| ③ 마지막 | scale(2) |
전체 결과를 2배 확대 |
※ 함수 순서를 바꾸면 다른 결과가 나온다. 예를 들어
scale이 rotate보다 먼저 적용되면, 회전 후 늘리는 게 아니라 늘린 뒤 회전한다 — 시각적으로 같아 보일 때도 있고 다를 때도 있다.반응형
3 perspective() vs perspective 속성
함수 안의 perspective와 별도 perspective 속성의 차이
혼동하기 쉬운 두 형태가 있다.
transform: perspective(120px) ...
- 변환할 요소 자체에 적용
- 요소 한 개에만 원근감
- 이번 코드처럼 단발성에 적합
부모에 perspective: 600px;
- 자식들 전체에 같은 원근감
- 여러 카드 묶음에 적합
- 3D 카드 갤러리 패턴
※ perspective 값이 작을수록 시청자가 가까이 있는 것 → 더 강한 왜곡. 120px은 비교적 강렬한 원근. 일반적으로 600~1200px이 자연스럽다.
4 rotateX(180deg) — 위아래가 뒤집히는 이유
3D 좌표축 기억하기
CSS의 3D 좌표는 직관적이지 않다.
| 축 | 방향 | 회전 시 보이는 효과 |
|---|---|---|
| X축 | 화면 가로 방향 (→) | 위아래 뒤집힘 (앞으로 고개 숙이기) |
| Y축 | 화면 세로 방향 (↓ 정도) | 좌우 뒤집힘 (책장 넘기기) |
| Z축 | 화면 안쪽 방향 (□→👁) | 평면에서 빙글빙글 (시계바늘처럼) |
이번 rotateX(180deg)는 가로축을 기준으로 ½바퀴를 도는 것 — 위와 아래가 자리를 바꾼다. 정사각형이 균등 도형이라 모양은 같지만, 만약 위쪽에 글자가 있었다면 그게 거꾸로 보였을 것.
5 margin: 100px의 의미
이번 코드의 div { margin: 100px; }은 모든 div에 100px 바깥 여백을 준다. 박스가 scale(2)로 커져 200x200이 됐을 때 부모/형제와 겹치지 않도록 미리 공간을 확보한 것.
※ 단,
div를 셀렉터로 쓰면 모든 div에 적용된다 — 특정 박스에만 적용하고 싶다면 .box처럼 클래스 셀렉터를 쓰는 게 안전하다.6 all transition으로 transform이 부드러워진다
transition: 2s ease-in 한 줄로 충분한 이유
transition의 property를 생략하면 기본값 all이 적용된다. 그래서 호버에서 변하는 transform이 자동으로 보간된다 — scale, perspective, rotateX 모두 함께 부드럽게.
transition: 2s ease-in; = transition-property: all; transition-duration: 2s; transition-timing-function: ease-in; → transform이 바뀌면 2초간 ease-in으로 보간
7 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| transform을 두 줄로 나눠 작성 | 마지막 줄만 살아남음 | 한 줄에 함수들을 공백으로 나열 |
| perspective 값이 너무 작음 (예: 30px) | 왜곡이 너무 커서 모양이 깨짐 | 120~1200px 사이로 조절 |
| 함수 순서 잘못 | 예상과 다른 모습 | 오른쪽에서 왼쪽으로 적용됨을 인지 |
| rotateX와 rotate(2D) 혼동 | 의도한 축이 아닌 회전 | rotateX/Y/Z 명시 |
| transition 누락 | 호버 즉시 변환됨 (점프) | 기본 셀렉터에 transition 작성 |
8 진행 흐름 — 0초~2초
1
0초 (호버 진입)100x100 파란 박스, 회전 0deg, scale 1
2
0~0.5초 (ease-in 초반)거의 안 움직임 — scale은 1.1, 회전은 약 18deg
3
0.5~1.5초가속 — 박스가 커지면서 X축으로 회전 시작 (perspective로 윗변이 멀어 보임)
4
1.5~2초회전이 90도 → 180도로 마무리, scale도 2배 도달
5
2초200x200 크기, X축 180deg (뒤집힌 상태) — 호버 유지
핵심 한 줄 요약
transform 합성한 줄에 함수들을 공백으로 나열
적용 순서오른쪽에서 왼쪽으로
scale(2)전체 크기 2배 (가로·세로 동일)
perspective(120px)시청자가 120px 떨어져 본다 — 원근감
rotateX(180deg)X축 기준 ½바퀴 — 위아래 뒤집힘
transition: 2s ease-inall 속성 2초 동안 천천히 출발
함수 순서 주의바꾸면 결과가 달라질 수 있음
Tags
#transform #transform합성 #함수합성 #scale #perspective #rotateX #적용순서 #transition #ease-in #다중변환 #CSS3 #3D변환 #인터랙션 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transform, transform합성, 함수합성, scale, perspective, rotateX, 적용순서, transition, ease-in, 다중변환, CSS3, 3D변환, 인터랙션, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS transition 실전 — 색상 전환 + border 둥글게 변신 (0) | 2026.06.09 |
|---|---|
| CSS transition-timing-function — ease · linear · ease-in/out 비교 (0) | 2026.06.09 |
| CSS transition 단축형 — transition: 2s ease-in 한 줄로 끝내기 (0) | 2026.06.08 |
| CSS transition 여러 속성 동시 변환 — 색상·회전·크기 한꺼번에 (0) | 2026.06.08 |
| CSS transition 기초 — transition-property · transition-duration 완전 정리 (0) | 2026.06.05 |
댓글