CSS3 transition · transform 완전 정리 — 부드러운 변환 효과

 

 

Web Development · CSS3 Transform & Transition

CSS3 transition · transform
완전 정리

변환(rotate·scale·translate) + 부드러운 효과(transition) 한번에 끝내기

시작 두 속성의 역할 분담

CSS3에서 가장 자주 함께 쓰이는 두 속성이다. transform은 요소의 형태를 변환한다(회전·크기·이동·기울임). transition은 그 변환이 부드럽게 일어나도록 시간을 입혀준다. transform 없이 transition만 쓰면 색·크기 같은 일반 속성에도 부드러운 효과를 줄 수 있다. 하지만 둘이 만나면 진가가 발휘된다.

용어 핵심 키워드

transform요소의 형태 변환 (회전·크기·이동·기울임)

rotate(deg)2D 회전 — 음수면 시계반대

scale(x,y)크기 배율 (1=원본, 0.5=반)

translate(x,y)현재 위치에서 이동

rotateX/Y/Z3D 축별 회전

rotate3dx,y,z 벡터 + 각도로 3D 회전

transform-origin변환의 중심점 (기본: center center)

transform-style자식의 3D 보존 여부 (preserve-3d)

perspective3D 원근감 거리

transition-property부드럽게 처리할 속성

transition-duration변환 시간 (1s, 500ms)

timing-function속도 곡선 (ease, linear 등)

---

1 rotate — 회전

.rotate1:hover { transform: rotate(20deg); } /* 시계방향 20도 */ .rotate2:hover { transform: rotate(-40deg); } /* 반시계방향 40도 */

마우스 올리면 회전 (왼쪽: +20°, 가운데: -40°, 오른쪽: 90°)

+20°

-40°

90°

---

2 scale — 크기 변환

.scalex:hover { transform: scaleX(1.4); } /* 가로만 1.4배 */ .scaley:hover { transform: scaleY(1.4); } /* 세로만 1.4배 */ .scale:hover { transform: scale(0.7); } /* 가로·세로 모두 0.7배 (축소) */

호버 시 — scaleX(1.4) / scaleY(1.4) / scale(0.7)

scaleX

scaleY

0.7

💡 scale(2)는 scale(2, 2)와 같다. 한 값만 주면 가로·세로 모두 같은 비율.

---

3 translate — 이동

.movex:hover { transform: translateX(30px); } .movey:hover { transform: translateY(20px); } .movexy:hover { transform: translate(15px, 20px); }

호버 시 — X·Y·XY 이동

+30 X

+20 Y

15,20

※ translate가 margin·position보다 좋은 이유

• 레이아웃 재계산(reflow)이 일어나지 않음 → 성능 ↑
• GPU 가속 사용 → 부드러움 ↑
• 다른 요소에 영향 안 줌 (자기 자신만 이동)

---

4 3D 회전 — rotateX / Y / Z / 3d

.origin { perspective: 200px; } /* 부모에 원근감 부여 */ .rotatex { transform: rotateX(45deg); } /* X축(가로) 회전 — 위/아래 기울임 */ .rotatey { transform: rotateY(45deg); } /* Y축(세로) 회전 — 좌/우 기울임 */ .rotatez { transform: rotateZ(45deg); } /* Z축 회전 = 일반 rotate와 동일 */ .rotatexyz { transform: rotate3d(2.5, 1.2, -1.5, 45deg); }

3D 회전 — rotateX / Y / Z / 3d

X

Y

Z

3D

⚠️ 3D 변환은 부모에 perspective가 있어야 입체감이 생긴다. perspective 없으면 평평하게만 보임.

---

5 transform-origin — 변환의 중심점

회전이나 크기 변환은 기본적으로 요소의 중앙을 기준으로 일어난다. 이 중심점을 transform-origin으로 바꿀 수 있다.

.ltop { transform-origin: left top; } .rtop { transform-origin: right top; } .lbottom { transform-origin: left bottom; } .rbottom { transform-origin: right bottom; }

같은 rotate(20deg)지만 origin이 다름 — 좌상/우상/좌하/우하

 

 

 

 

표기	의미
center center	(기본값) 정중앙
left top	좌상단 모서리
50% 100%	가로 가운데, 세로 아래
20px 30px	좌상단 기준 픽셀 좌표

---

반응형

6 transition — 부드러운 변환

속성이 변할 때 그 변화를 시간에 걸쳐 부드럽게 보여준다. 가장 자주 쓰는 단축 표기:

/* property | duration | timing-function | delay */ transition: all 1s ease; transition: background-color 0.3s ease-in-out 0.1s;

속성별 다른 시간 주기

.tr1 { transition-property: width, height; transition-duration: 2s, 1s; /* width는 2초, height는 1초 */ }

두 가지 transition 샘플 — bg는 ease(색만), border는 linear(테두리+모서리)

 

 

---

7 timing-function — 속도 곡선 5종

값	특징	언제 쓰나
ease	천천히→빠르게→천천히 (기본)	가장 자연스러움 — 대부분의 UI
linear	일정한 속도	로딩 인디케이터, 회전 애니메이션
ease-in	천천히 시작 → 빠르게	요소가 사라질 때
ease-out	빠르게 시작 → 천천히	요소가 나타날 때 (가장 자연스러움)
ease-in-out	천천히 → 빠르게 → 천천히	좌→우 같은 양방향 이동
cubic-bezier(...)	커스텀 곡선	특수 효과 (튕김·과장)

호버 시 height 변화 — 5개 곡선 비교 (모두 동시 시작, 도착 순서가 다름)

ease

linear

ease-in

ease-out

ease-in-out

---

8 transform-style: preserve-3d

3D 변환된 부모 안에 또 다른 3D 자식이 있을 때, 자식의 3D 변환이 유지되는지(preserve-3d) 아니면 평면화되는지(flat, 기본)를 결정한다.

#tr-style1 { transform-style: flat; } /* 자식의 3D는 평면 */ #tr-style2 { transform-style: preserve-3d; } /* 자식 3D 그대로 유지 */

💡 카드 뒤집기·큐브 메뉴 같은 다층 3D UI를 만들 때 preserve-3d 필수.

---

9 자주 하는 실수

실수	증상	해결
transition을 :hover에 넣음	호버 들어갈 때만 부드럽고 나올 때 뚝	transition은 원본 셀렉터에 부여
여러 transform 따로 적음	나중 것만 적용됨	한 줄에 공백으로: transform: rotate(45deg) scale(1.2)
3D 회전이 평면 같음	perspective 없음	부모에 perspective: 600px
transform-origin 이상하게 회전	중심점이 의도와 다름	좌표 다시 확인 (left top 등)
transition: all 남발	의도 안 한 속성도 부드러워짐	구체 속성 지정 권장
display:none ↔ block에 transition	안 먹힘	display는 transition 대상이 아님 — opacity로 대체

---

요약 핵심 한 줄 정리

transform · transition 핵심

rotate(deg)2D 회전 (음수 = 반시계)

scale(x,y)크기 배율 — 한 값만 주면 균등

translate(x,y)이동 — margin/position보다 성능 ↑

rotateX/Y/Z3D 축 회전 (perspective 필수)

transform-origin변환 중심점 (기본 center)

perspective부모에 부여 → 3D 원근감 활성화

transform-stylepreserve-3d로 자식의 3D 유지

transitionproperty duration timing delay 단축 표기

ease vs linear자연스러움 vs 일정 속도 — UI는 ease 권장

transition 위치:hover가 아닌 원본 셀렉터에 — 양방향 부드럽게

Tags

#transform #transition #rotate #scale #translate #rotate3d #transform-origin #perspective #timing-function #hover효과 #웹개발 #티스토리

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

transform, transition, rotate, scale, translate, rotate3d, transform-origin, perspective, timing-function, hover효과, 웹개발, 티스토리