CSS3 animation — 2개 keyframes 동시 + 3D 회전 완전 정리

 

 

Web Development · CSS3 Animation

CSS3 animation —
2개 keyframes 동시 + 3D 회전

로딩 스피너처럼 회전 + 색 변화를 동시에 적용하는 복합 애니메이션

시작 오늘 분석할 코드

animation에 쉼표로 두 개의 다른 keyframes를 동시에 적용한 코드. 박스가 X축·Y축으로 3D 회전하면서 색도 빨강→초록→파랑으로 바뀐다.

.box { width: 60px; height: 60px; animation: rotate 1.5s infinite, background 1.5s infinite alternate; /* 두 애니메이션 쉼표로 연결 */ } @keyframes rotate { from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } } @keyframes background { from { background: red; } 50% { background-color: green; } to { background-color: blue; } }

실제 출력 미리보기

 

용어 용어 정리

복합 animation한 요소에 여러 keyframes 동시 적용

쉼표 연결두 애니메이션을 ,로 구분

perspective3D 원근감 — 멀고 가까움 효과

rotateX가로축 기준 회전 (앞·뒤로 뒤집힘)

rotateY세로축 기준 회전 (좌·우로 뒤집힘)

중간 단계50% { ... } — from·to 사이 추가 시점

3D 변환X·Y·Z 축 기준 변환

---

1 2개 애니메이션을 한 요소에

한 요소에 여러 애니메이션을 적용할 때 쉼표로 연결한다. 각 애니메이션은 독립적으로 자기 duration·iteration을 가진다.

animation: rotate 1.5s infinite, background 1.5s infinite alternate; ─────┬───── ───── ──────────┬────────── ───────── 이름 지속 반복 이름 지속 반복+왕복 → 두 애니메이션이 동시에 진행 → 각자 다른 keyframes 참조

---

2 3D 회전 — perspective + rotateX/Y

함수	축	효과
rotateX(deg)	가로축	앞으로/뒤로 기울어짐 (절하기)
rotateY(deg)	세로축	좌·우로 뒤집힘 (책장 넘기기)
rotateZ(deg)	z축 (정면)	2D rotate와 같음 (시계처럼)
rotate3d(x,y,z,deg)	임의 축	x,y,z 비율로 회전축 정의

---

3 perspective의 역할

perspective(120px)은 관찰자가 요소에서 120px 떨어진 거리에서 본다는 의미. 값이 작을수록 더 가까이서 본 것처럼 강한 원근감.

perspective 없음: 요소가 평면에서 회전 → 평면적 perspective 있음: 3D 원근감 → 가까운 면이 크게, 먼 면이 작게 값이 작을수록 강한 효과: 100px → 매우 가까이 (왜곡 큼) 500px → 적당한 거리 2000px → 거의 평행 (원근 약함)

---

 

반응형

 

4 from / 50% / to — 중간 단계

이 코드는 from/to만이 아닌 50%도 정의했다. 즉 3개의 시점이 있다.

시점	회전 상태
from (0%)	X 0deg, Y 0deg → 정면
50%	X -180deg, Y 0deg → 위·아래 뒤집힘
to (100%)	X -180deg, Y -180deg → 좌·우도 뒤집힘 (완전히 돌림)

※ 0~50%는 X축만 회전, 50~100%는 Y축만 회전 → 두 단계의 다른 회전이 자연스럽게 이어짐.

---

5 background-color 애니메이션 패턴

@keyframes background { from { background: red; } 50% { background-color: green; } to { background-color: blue; } }

※ background와 background-color가 섞여 있다. CSS는 둘 다 받아주지만 일관성을 위해 한 가지로 통일이 좋다.

---

6 자주 하는 실수

실수	증상	해결
두 애니메이션이 같은 속성 변경	나중 것이 이김	다른 속성으로 분리
perspective 누락	3D 회전이 평면적	요소 또는 부모에 perspective
transform-style: preserve-3d 누락	3D 자식이 평평해 보임	3D 박스의 부모에 추가
iteration 다른데 동시 시작	점점 어긋남	같은 duration · iteration 사용

---

핵심 한 줄 요약

복합 animation한 요소에 여러 keyframes 쉼표로 연결

rotateX/Y3D 가로/세로축 회전

perspective원근감 — 작을수록 강함

중간 단계50% { ... }로 다단계 애니메이션

실무로딩 스피너·CSS만의 인터랙션 애니메이션 활용

Tags

#CSS3 #animation #keyframes #복합애니메이션 #rotateX #rotateY #perspective #3D회전 #transform #다단계애니메이션 #로딩스피너 #infinite #alternate #CSS #HTML #웹개발 #티스토리

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

CSS3, animation, keyframes, 복합애니메이션, rotateX, rotateY, perspective, 3D회전, transform, 다단계애니메이션, 로딩스피너, infinite, alternate, CSS, HTML, 웹개발, 티스토리