CSS Transform — rotate · hover · 벤더 프리픽스 완전 정리

 

 

Web Development · CSS Transform

CSS Transform —
rotate · hover · 벤더 프리픽스 완전 정리

마우스 올리면 회전·확대·이동하는 인터랙션의 기본

시작 오늘 분석할 코드

"Mouse Over"라고 적힌 박스 위에 마우스를 올리면 15도 기울어진다. 클릭이 아니라 마우스 오버만으로도 인터랙션이 일어나는 CSS 트릭.

.box { position: absolute; left: 50px; top: 70px; width: 100px; height: 60px; background: #fff; border: 2px solid green; } .box:hover { -webkit-transform: rotate(15deg); /* Safari, Chrome */ -moz-transform: rotate(15deg); /* Firefox */ -o-transform: rotate(15deg); /* Opera */ -ms-transform: rotate(15deg); /* IE */ transform: rotate(15deg); /* 표준 */ }

실제 출력 결과 — 마우스 올려보세요

rotate(15deg) scale(1.3) translate skew(15deg)

---

1 :hover — 마우스 올림 상태

CSS의 가상 클래스(pseudo-class) 중 하나. 사용자 마우스가 요소 위에 있을 때만 적용된다.

.box { background: white; } /* 평소 */ .box:hover { background: yellow; } /* 마우스 올린 동안만 */ /* 마우스 떠나면 다시 white */

※ 다른 가상 클래스

• :hover — 마우스 올림
• :active — 클릭하는 동안
• :focus — 키보드 Tab으로 포커스
• :visited — 방문한 링크
• :disabled — 비활성화된 입력

---

2 transform — 4대 변형 함수

함수	효과	예시
rotate()	회전	rotate(15deg) → 15도 시계방향
scale()	확대·축소	scale(1.5) → 1.5배 / scale(0.5) → 절반
translate()	이동	translate(20px, 10px) → 우 20, 하 10
skew()	기울이기	skew(15deg) → 비뚤어짐

/* 여러 변형을 동시에 — 공백으로 나열 */ transform: rotate(15deg) scale(1.2) translate(10px, 0); /* 음수도 가능 */ transform: rotate(-15deg); /* 반시계 방향 */ transform: scale(0.8); /* 작아짐 */

---

3 벤더 프리픽스 — 옛날의 흔적

이번 코드의 -webkit-·-moz-·-o-·-ms-는 벤더 프리픽스(Vendor Prefix)다. 표준이 정해지기 전 브라우저별 실험 구현을 적용하기 위함이었다.

프리픽스	브라우저	현재 필요?
-webkit-	Chrome · Safari · Edge	일부만
-moz-	Firefox	거의 X
-o-	Opera (옛 버전)	X
-ms-	Internet Explorer · 옛 Edge	X (IE 종료)

※ 2026년 기준 transform은 모든 모던 브라우저에서 표준만으로 동작. 벤더 프리픽스는 거의 불필요. 옛 코드에 남아 있는 거 정도.

※ 모던 워크플로우는 Autoprefixer 같은 도구가 빌드 시 자동으로 필요한 프리픽스를 추가. 개발자는 표준 코드만 작성.

---

4 position: absolute — 절대 위치

이번 코드의 position: absolute는 박스를 페이지 좌측 위 기준으로 정확한 위치에 둔다.

position 값	기준
static (기본)	일반 흐름 (top·left 무시)
relative	자기 원래 위치 기준 이동
absolute	가장 가까운 상대 부모 기준 (없으면 body)
fixed	화면(viewport) 기준 — 스크롤해도 고정
sticky	스크롤되다 일정 위치에서 고정

---

반응형

5 transition으로 부드럽게 — 한 줄 추가

이번 코드는 즉시 변형한다. 부드럽게 회전하려면 transition을 추가.

.box { /* ... 기존 ... */ transition: transform 0.3s ease; /* ← 한 줄 추가 */ } .box:hover { transform: rotate(15deg); } → 0.3초에 걸쳐 부드럽게 회전!

---

6 자주 하는 실수

실수	증상	해결
모든 프리픽스 추가	코드 비대	표준만 + Autoprefixer
transition 누락	즉시 점프	transition: transform 0.3s
여러 transform 별도 줄	마지막만 적용 (덮어씀)	한 줄에 공백 구분
rotate(15)	단위 누락 — 안 됨	15deg 단위 명시
position 없이 left/top	안 먹음	position 명시 필요

---

핵심 한 줄 요약

:hover마우스 올림 상태 — 가상 클래스

transform요소 변형 (회전·확대·이동·기울임)

rotate(deg)회전 — 단위 deg 필수

scale(x)확대·축소 — 1=원본

translate(x,y)위치 이동

벤더 프리픽스현재 거의 불필요 (Autoprefixer)

transition변화를 부드럽게

Tags

#transform #rotate #scale #translate #hover #position #벤더프리픽스 #webkit #CSS #HTML #애니메이션 #transition #웹개발 #티스토리

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

transform, rotate, scale, translate, hover, position, 벤더프리픽스, CSS, HTML, 애니메이션, transition, 웹개발, 티스토리