3D카드 뒤집기
먼저 전체 구조부터 이해하기
HTML 구조
<div class="card">
<div class="inner">
<div class="front">앞면</div>
<div class="back">뒷면</div>
</div>
</div>
그림으로 보면
.card
│
└── .inner
│
├── .front
└── .back
여기서 역할은
| card | 카메라(우리가 보는 공간) |
| inner | 실제로 회전하는 카드 |
| front | 앞면 |
| back | 뒷면 |
카드는 inner이고, front와 back은 inner에 붙어 있는 종이 두 장이라고 생각하면 됩니다.
1단계 : card (= 공간)
.card{
width:200px;
height:130px;
perspective:300px;
}
width
width:200px;
카드의 가로 길이
height
height:130px;
세로 길이
perspective
여기가 제일 중요합니다.
perspective:300px;
이건
"카메라가 카드에서 얼마나 떨어져 있는가"
를 의미합니다.
사진으로 생각하면
사람 👀
300px
카드
perspective가 없으면
앞
□□□□□
뒤집기
□□□□□
평면처럼 돌아갑니다.
perspective가 있으면
앞
□□□□□
회전
╱□□□
│□□
뒤
□□□□□
입체적으로 보입니다.
숫자가 작을수록
perspective:150px;
카메라가 가까움
👀
□
엄청 휘어 보입니다.
숫자가 클수록
perspective:1000px;
멀리서 보는 느낌
👀
□□□□
거의 평면처럼 보입니다.
쉽게 기억하면
작은 숫자
↓
카메라 가까움
입체감 강함
큰 숫자
↓
카메라 멀리
입체감 약함
2단계 : inner
.inner{
position:relative;
width:100%;
height:100%;
}
여기가 진짜 카드입니다.
card
┌────────────┐
│ │
│ inner │
│ │
└────────────┘
width:100%
width:100%;
부모(.card)만큼
card
┌────────────┐
│ inner │
└────────────┘
꽉 채웁니다.
height:100%
세로도 부모만큼 채웁니다.
3단계 : position:relative
position:relative;
이건
"여기가 자식들의 기준점이다."
라는 의미입니다.
그래서
앞면과 뒷면은
absolute
를 사용합니다.
absolute는
"기준이 되는 부모를 찾는다."
입니다.
그래서
.inner
를 기준으로
.front
.back
가 겹쳐집니다.
그림
inner
┌────────────┐
│ │
│ │
└────────────┘
↑
front
back
둘 다 여기에 붙음
4단계
transition:transform 1s;
transition은
변화가 천천히 일어나게 한다.
없으면
앞
↓
뒤
순간 이동
있으면
앞
↻↻↻↻
뒤
애니메이션처럼 돌아갑니다.
5단계
transform-style:preserve-3d;
이 부분도 정말 중요합니다.
기본적으로 브라우저는
모든 요소를
종이처럼 납작하게
생각합니다.
front
back
둘 다
□□□□
한 평면입니다.
그런데
preserve-3d;
를 주면
앞
□□□□
공간
뒤
□□□□
진짜 앞뒤가 생깁니다.
없으면
앞
뒤
가 겹쳐져 이상하게 보입니다.
6단계
.card:hover .inner{
transform:rotateY(180deg);
}
hover =마우스를 올렸을 때
rotateY
Y축
은 세로축입니다.
│
│
│
이 축을 기준으로 회전합니다.
- 0도 - 앞
- 90도 - 옆모습
│
- 180도 - 뒤집힌 상태
7단계
.front,
.back{
position:absolute;
}
absolute는
겹쳐 놓는다.
앞
□□□□
뒤
□□□□
같은 위치에 있습니다.
inset:0
inset:0;
이건
top:0;
right:0;
bottom:0;
left:0;
과 같습니다.
즉
부모를
꽉 채워라
입니다.
flex
display:flex;
글자 위치 설정을 위한 준비
align-items:center;
세로 : 가운데
□□□□
글
□□□□
----------------------------------------------------------------------------------------------------------------------------------------------------------------
justify-content:center;
가로 : 가운데
□□□□□□
글
□□□□□□
둘을 같이 쓰면
┌─────────┐
│ │
│ 글 │
│ │
└─────────┘
정가운데가 됩니다.
backface-visibility
여기도 핵심입니다.
backface-visibility:hidden;
종이를 생각해 보겠습니다.
앞면
😀
뒤집으면
🙃
종이의 뒤통수는 보이면 안 됩니다.
그래서
hidden
을 사용합니다.
없으면
앞면
😀
뒤집기
🙃
거울처럼 글자가 뒤집혀 보입니다.
있으면
😀
↓
(사라짐)
↓
😎
뒤통수는 안 보입니다.
왜 back은 처음부터 180도 돌려 놓을까?
.back{
transform:rotateY(180deg);
}
많은 초보자가 가장 헷갈리는 부분입니다.
처음 상태
front
😀
back
😎
둘 다 같은 방향이면
😀
😎
겹쳐서 보입니다.
그래서
back을
180도
미리 뒤집어 둡니다.
front
😀
back
🙃
이제
backface:hidden;
덕분에
🙃
는 안 보입니다.
그래서 처음에는
😀
만 보입니다.
마우스를 올리면
inner
180도 회전
합니다.
그러면
front는
🙃
가 되어 숨겨지고,
back은
원래 180도 돌아가 있었는데, inner도 다시 180도 회전했기 때문에
180° + 180° = 360°
이 되어
😎
정방향으로 보입니다.
전체 동작을 순서대로 보면
① 처음
front 😀 (보임)
back 🙃 (숨김)
↓
② hover
inner가 회전 시작
↓
③ front가 뒤로 감
🙃
hidden
↓
④ back이 앞으로 옴
😎
↓
⑤ 결과
뒷면만 보임
한 문장으로 요약
- .card: 카메라(3D 공간)를 만든다. (perspective)
- .inner: 실제로 회전하는 카드이다.
- .front와 .back: 카드의 앞면과 뒷면으로, 같은 위치에 겹쳐 놓는다.
- .back: 처음부터 180° 돌려 숨겨 둔다.
- backface-visibility: hidden: 카드의 뒷면(뒤통수)이 보이지 않게 한다.
- :hover + rotateY(180deg): 카드 전체(.inner)를 뒤집어 앞면 대신 뒷면이 보이게 만든다.
이 과정을 "카메라(card) → 회전하는 카드(inner) → 앞면/뒷면(front/back)"의 역할로 나누어 이해하면 3D 카드의 동작 원리를 훨씬 쉽게 떠올릴 수 있습니다.
좋아 👍 지금 내용은 CSS 자동 애니메이션(@keyframes + animation) 핵심 개념이 잘 들어있는데, 초보자 기준으로 “정리 + 이해 + 확장(다른 종류)”까지 한 번에 정리해줄게.
CSS 자동 애니메이션 정리 (@keyframes)
1. 핵심 개념 한 줄 요약
🧠 쉽게 비유
- @keyframes = “움직임 대본”
- animation = “그 대본을 재생하는 플레이어”
📦 기본 구조
1️⃣ HTML
<div class="ball"></div>
👉 움직일 요소 하나 만들기
2️⃣ CSS (핵심)
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
.ball {
width: 80px;
height: 80px;
border-radius: 50%;
background: hotpink;
animation: float 1.5s ease-in-out infinite;
}
🎯 코드 의미
@keyframes float
0% → 제자리
50% → 위로 올라감
100% → 다시 제자리
👉 “둥둥 떠다니는 움직임”
animation
animation: float 1.5s ease-in-out infinite;
값의미
| float | 사용할 애니메이션 이름 |
| 1.5s | 한 번 움직이는 시간 |
| ease-in-out | 부드럽게 |
| infinite | 무한 반복 |
🚀 float 말고 다른 애니메이션 종류
중요한 포인트:
float는 “종류”가 아니라 “이름”이다
그래서 이름을 마음대로 바꿀 수 있음
🔥 자주 쓰는 애니메이션 8가지
1️⃣ bounce (튀기기)
@keyframes bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-80px); }
}
👉 공이 “통통 튀는 느낌”
●
↑↑
↓
↑
↓
2️⃣ slide (옆으로 이동)
@keyframes slide {
from { transform: translateX(-200px); }
to { transform: translateX(0); }
}
👉 왼쪽 → 오른쪽 이동
←←← ● →→→
3️⃣ spin (회전)
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
👉 빙글빙글
↻↻↻
4️⃣ pulse (커졌다 작아짐)
@keyframes pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
👉 심장 뛰는 느낌
○ → ◎ → ○
5️⃣ shake (흔들기)
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
👉 좌우 흔들림
← → ← → ←
6️⃣ fade (사라졌다 나타남)
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
👉 서서히 등장
투명 → 보임
7️⃣ slideUp (아래 → 위 등장)
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
👉 아래에서 올라오는 UI
8️⃣ rotateY (3D 뒤집기)
@keyframes flip {
from { transform: rotateY(0); }
to { transform: rotateY(180deg); }
}
👉 카드 뒤집기
앞 → 뒤
🧩 여러 개 동시에 사용도 가능
.ball {
animation:
float 2s ease-in-out infinite,
spin 4s linear infinite;
}
👉 둥둥 + 회전 동시에
⚠️ 초보자 핵심 주의 (중요)
❗ transform은 1개만 덮어씀
예:
transform: translateX();
transform: translateY();
👉 같이 쓰면 하나가 사라질 수 있음
한 줄 정리
- @keyframes = “움직임 설계도”
- animation = “그 설계도 실행”
- 이름은 자유롭게 만들 수 있음
- float는 그냥 이름일 뿐
핵심
- 움직임은 @keyframes에서 만든다
- 실행은 animation이 한다
- 이름은 float든 bounce든 마음대로
'성남 프론트엔드' 카테고리의 다른 글
| 6일차 _JavaScript 기초 (0) | 2026.07.06 |
|---|---|
| 5일차 _CSS : Position, 가상요소, CSS 리셋 (0) | 2026.07.05 |
| 3일차 _Claude Code 연결, CSS (0) | 2026.07.01 |
| 2일차_HTML_Class , Id (0) | 2026.06.30 |
| 1일차_VS Code, HTLM (0) | 2026.06.30 |