왕진 블로그
반응형
Web Development · CSS Transition
CSS transition 여러 속성 동시 변환 —
색상 · 회전 · 크기 한꺼번에
transition-property에 4개를 등록하고 transform: rotate()를 더한 코드
시작 오늘 분석할 코드
이전 예제의 발전형. 이번에는 4가지 속성(background-color, transform, width, height)이 동시에 변하면서 박스가 회전까지 한다. duration이 2개뿐이라 어떻게 작동하는지가 핵심 포인트다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Transform</title> <style> h1 { text-align: center; font-size: 52px; } .tr1 { width: 100px; height: 100px; background-color: red; border: 1px solid black; transition-property: background-color, transform, width, height; transition-duration: 2s, 3s; } .tr1:hover { width: 200px; height: 200px; background-color: #ff6e5f; transform: rotate(180deg); } </style> </head> <body> <div class="tr1"><h1>!</h1></div> </body> </html>
실제 출력 미리보기 (마우스를 박스에 올려보세요)
!
색·크기는 2초, 회전은 3초 — 회전이 끝나기 전에 색이 먼저 안정됨
용어 용어 정리
transform요소를 변형(회전·이동·크기·기울임)
rotate(180deg)시계 방향으로 180도 회전
degdegree (도) — 각도 단위
background-color배경색 — 색깔도 transition 가능
#ff6e5f코랄 — 16진수 RGB 색상값
duration 부족 시앞에서부터 다시 반복 적용
transform-origin회전 기준점 (기본 중심)
font-size 52px큰 글자 — 회전 효과를 시각적으로 강조
1 property 4개 vs duration 2개 — 어떻게 매칭되나?
콤마 개수가 안 맞을 때의 규칙
이번 코드의 가장 헷갈리는 지점. transition-property는 4개인데 transition-duration은 2개뿐이다. CSS 명세는 이 경우 "부족하면 처음으로 돌아가 반복"한다고 정해져 있다.
| 인덱스 | property | duration (반복) | 실제 적용 |
|---|---|---|---|
| 1 | background-color |
2s | 색은 2초 |
| 2 | transform |
3s | 회전은 3초 |
| 3 | width |
2s (1번 재사용) | 가로는 2초 |
| 4 | height |
3s (2번 재사용) | 세로는 3초 |
※ 실수하기 쉬운 부분: 작성자가 의도한 게 "전부 2초+3초"였더라도, CSS는 위 표처럼 짝을 맞춘다. 정확히 통제하려면 duration도 4개 모두 적어주는 편이 안전하다.
2 transform: rotate()
왜 width/color와 달리 transform 하나로 회전을 표현하나?
rotate는 단독 속성이 아니라 transform 속성의 함수 값이다. transform 안에는 rotate, scale, translate, skew 등이 같이 들어갈 수 있다. 그래서 transition-property에는 transform이라고 적는다 (rotate가 아니다).
/* O: 올바른 형태 */ transition-property: transform; transform: rotate(180deg); /* X: 이렇게 적으면 작동 안 함 */ transition-property: rotate;
※ rotate(180deg)의 의미
- 0deg → 180deg → (호버 해제 시) 다시 0deg
- 180도면 위아래가 뒤집혀 보임 — "!" 글자가 거꾸로
- 360deg면 한 바퀴 돌아 시각적으로 같은 위치 (하지만 transition 동안은 회전이 보임)
반응형
3 색상도 transition이 된다
background-color는 어떻게 부드럽게 변하나?
색은 RGB 세 값으로 이루어져 있어 각 채널을 숫자처럼 보간할 수 있다. 빨강(255,0,0) → 코랄(255,110,95)로 갈 때, 브라우저는 G·B 채널을 매 프레임 조금씩 늘린다.
red = rgb(255, 0, 0) ↓ 2초 동안 보간 #ff6e5f = rgb(255, 110, 95) → G: 0 → 110, B: 0 → 95 (R은 그대로)
※ 단, 키워드 색끼리도 transition 됨 (red ↔ blue 등). 단
currentColor나 변수 보간은 일부 옛 브라우저에서 제한이 있었다.4 진행 흐름 — 마우스가 올라간 0초~3초
1
0초 (호버 진입)red, 100x100, 0deg 회전 — 모든 transition 시작
2
1초색 절반쯤 코랄에 가까워짐, 가로/세로도 절반, 회전 ⅓
3
2초색·가로 완료(코랄, 200px) — 세로(3s)는 ⅔, 회전(3s)은 120deg
4
3초모든 transition 종료 — 200x200, 코랄, 180deg 회전 (느낌표 거꾸로)
5
호버 이탈같은 시간으로 역방향 — 색·가로 2초, 세로·회전 3초에 걸쳐 원상복구
5 h1이 안에 들어간 이유
자식 요소도 함께 회전한다
박스(.tr1) 안에 <h1>!</h1>이 들어 있다. 부모가 rotate(180deg)하면 자식까지 함께 회전한다. 그래서 느낌표가 뒤집혀 보이는 게 회전을 시각적으로 확인하는 신호다.
.tr1 (회전됨) ← rotate(180deg) └─ h1 "!" (같이 회전 → 거꾸로)
※ 자식만 회전 안 하게 하려면 자식에
transform: rotate(-180deg)를 추가해 상쇄(counter-rotate)할 수 있다. 회전하는 카드 위에 글자만 정자세로 두는 트릭에 자주 쓰임.6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| transition-property: rotate | 회전이 부드럽게 변하지 않음 | transform이라고 써야 함 |
| duration 단위 누락 (2 만 적음) | 해당 시간이 무시됨 | 2s 또는 2000ms |
| property와 duration 개수가 의도와 다름 | 일부 속성에 엉뚱한 시간이 적용 | 둘의 개수를 똑같이 맞춤 |
| 접두사 순서를 표준 뒤에 둠 | 구버전에서 인식 안 됨 | 접두사 → 표준 순으로 |
| transform 여러 함수를 따로 줌 | 마지막 transform만 적용 | 한 줄에 합쳐 rotate(...) scale(...) |
7 단축형으로 다시 쓰면
/* 명확하게 4개 모두 단축형 */ transition: background-color 2s, transform 3s, width 2s, height 3s;
단축형으로 쓰면 각 속성과 시간이 한 줄에 묶여 의도가 분명히 드러난다. duration이 부족할 때의 반복 규칙에 의존하지 않아도 된다.
핵심 한 줄 요약
property 4개background-color, transform, width, height
duration 2개2s, 3s — 부족하면 처음으로 돌아가 반복
매칭 결과색·가로 2s / 회전·세로 3s
transform: rotatetransform 속성의 함수값 — property에는 transform
색 보간RGB 채널을 매 프레임 숫자처럼 변환
자식 동반부모 회전 시 자식도 함께 회전
실무 권장단축형 + 모든 속성에 명시적 duration
Tags
#transition #transition-property #transition-duration #여러속성 #동시전환 #transform #rotate #background-color #width #height #콤마매칭 #RGB보간 #CSS3 #인터랙션 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transition, transition-property, transition-duration, 여러속성, 동시전환, transform, rotate, background-color, width, height, 콤마매칭, RGB보간, CSS3, 인터랙션, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS transform 함수 합성 — scale · perspective · rotateX 한 줄에 (0) | 2026.06.08 |
|---|---|
| CSS transition 단축형 — transition: 2s ease-in 한 줄로 끝내기 (0) | 2026.06.08 |
| CSS transition 기초 — transition-property · transition-duration 완전 정리 (0) | 2026.06.05 |
| CSS3 animation — 2개 keyframes 동시 + 3D 회전 완전 정리 (0) | 2026.06.05 |
| CSS3 animation — 속성 5종 + transform 활용 완전 정리 (0) | 2026.06.05 |
댓글