카드 플립Card Flip
카드가 세로축이나 가로축으로 180도 돌아 앞면에서 뒷면으로 바뀌는 움직임A card rotates 180 degrees around its vertical or horizontal axis to swap front for back.
무엇을 전하나What it tells
- 질문 카드를 뒤집어 답을 보여 줄 때
- 전과 후, 문제와 해결처럼 한 대상의 두 상태를 대비할 때
- 제품 카드 앞면의 이름에서 뒷면의 사양으로 넘어갈 때
- Flip a question card to reveal the answer.
- Contrast two states of one object, such as before and after.
- Move from a product card's name on the front to its specs on the back.
- backface-visibility를 숨기지 않으면 두 면이 겹쳐 보인다
- perspective 없이 돌리면 납작하게 줄어들기만 해 입체감이 사라진다
- 한 화면에서 3장 넘게 동시에 뒤집지 않는다
좋은 예와 나쁜 예Good and bad use
질문 카드가 0.8초 동안 Y축으로 돌아 뒷면에 답이 나타나고, 90도 지점에서 면이 바뀌는 순간 카드 폭이 가장 얇아진다
회전이 0.3초 이하로 빨라 뒷면을 읽을 틈이 없거나, 뒷면 글자가 좌우 반전된 채 나온다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 회전 시간 | 0.8s | 0.5~1.2s | 짧으면 면 교체가 안 읽힘 |
| 회전각 | 180deg | 180 또는 -180 | 한 방향으로만 돌린다 |
| perspective | 900px | 700~1400px | 작을수록 원근이 과장됨 |
| 뒷면 정지 | 1.2s | 0.8~2.0s | 뒷면을 읽는 시간 |
| 이징 | power2.inOut | power1~power3 | 중간에 가장 빠르게 |
gsap.set('.stage', { perspective: 900 });
gsap.set('.card', { transformStyle: 'preserve-3d' });
// .face { backface-visibility: hidden } .back { transform: rotateY(180deg) }
tl.to('.card', { rotationY: 180, duration: 0.8, ease: 'power2.inOut' }, 0.5);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP 타임라인으로 <대상> 카드를 Y축으로 180도 뒤집어 줘. 부모에 perspective 900px, 카드에 transform-style preserve-3d를 주고 두 면은 backface-visibility hidden으로 겹쳐 놓아. 0.5초에 시작해 0.8초 동안 power2.inOut으로 돌리고 뒷면을 1.2초 보여 줘. transform만 쓰고 paused 타임라인 하나로 seek 가능하게 해.
Use GSAP to flip <target> 180 degrees around the Y axis. Give the parent perspective 900px and the card transform-style preserve-3d, with both faces stacked and backface-visibility hidden. Start at 0.5 seconds, rotate for 0.8 seconds with power2.inOut, then hold the back for 1.2 seconds. Use transforms only and one paused timeline so it can be seeked.
<파일>의 카드에 플립을 적용해. .stage perspective 900px, .card preserve-3d, 앞뒤 면은 backface-visibility hidden에 뒷면 rotateY(180deg). tween은 position 0.5, duration 0.8, rotationY 180, ease power2.inOut. 0.5초, 0.9초, 1.4초 시점을 캡처해 시작은 앞면, 0.9초 근처에서 폭이 가장 좁고, 1.4초에는 뒷면 글자가 정방향인지 확인해.
Apply a card flip in <file>. .stage perspective 900px, .card preserve-3d, both faces backface-visibility hidden, back face rotateY(180deg). Tween at position 0.5, duration 0.8, rotationY 180, ease power2.inOut. Capture at 0.5, 0.9 and 1.4 seconds: front face at the start, narrowest width near 0.9, and un-mirrored back text at 1.4.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- pmndrs/react-springMIT
- animate-css/animate.cssHippocratic-2.1
- helpx.adobe.comunknown
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/transitions/css-3d.md)unknown