Caption Style
Flip Card Caption Effect
The Flip Card effect rotates text 180 degrees on the vertical axis, like a playing card turning face-up — a 3D reveal animation perfect for dramatic moments.
What Are Flip Card Effect?
Flip Card applies a 3D rotation around the Y-axis (rotateY), starting at 180 degrees (text facing away from the viewer, invisible) and rotating to 0 degrees (facing the viewer, fully visible). With CSS perspective applied, this creates the convincing illusion of a card being flipped toward the viewer. The rotation passes through a 90-degree midpoint where the text is edge-on and invisible, then continues to face the viewer. This midpoint creates a natural 'reveal' moment — there's a split second where the word is hidden, followed by it swinging into view, which adds dramatic timing that other effects don't provide. Flip Card is the most cinematic entrance animation in the library. Its Y-axis rotation suggests that the text existed before you saw it and was simply turned to face you — a concept that adds narrative depth to what is otherwise a text overlay. This makes it ideal for reveal moments, surprise statistics, and before/after transitions.
How It Works
Flip Card uses CSS 3D transforms with rotateY. The parent container establishes a perspective context (perspective: 600-1000px). The word element starts at rotateY(180deg) and transitions to rotateY(0deg) using a spring-based easing function. At 90 degrees, the text is perpendicular to the screen and effectively invisible. The backface-visibility CSS property is set to hidden, ensuring the reversed text (which would be mirrored) is not visible during the first half of the rotation. Opacity starts at 0 and transitions to 1 during the rotation, timed to coincide with the moment the text passes the 90-degree perpendicular point. This combined opacity+rotation transition creates a clean reveal without any mirrored text artifacts.
Best For
- -Reveal moments — statistics, answers, surprising facts
- -Before/after comparison content
- -Quiz and trivia videos (flip to show the answer)
- -Card game and magic-themed content
- -Any moment where the reveal itself is part of the storytelling
Best Platforms for Flip Card Effect
TikTok
The dramatic reveal moment in Flip Card creates suspense that hooks TikTok viewers. For quiz content, 'wait for it' reveals, and surprising statistics, the card-flip is a perfect visual metaphor.
Captions for TikTok →YouTube
For educational and explainer videos, Flip Card turns the appearance of key information into a visual event. The 3D rotation adds production value that elevates standard talking-head content.
Captions for YouTube →Instagram Reels
Flip Card's cinematic quality aligns with Instagram's emphasis on visual polish. The 3D effect creates content that's more likely to be saved and shared for its production quality.
Captions for Instagram Reels →01
Flip Card: Turning Text Reveals into Visual Events
Most caption effects answer the question 'how does this text appear?' Flip Card answers a different question: 'where was this text before you saw it?' The Y-axis rotation implies that the word existed in the scene, just facing away from you. When it flips to face the viewer, it's not appearing — it's being revealed. This subtle narrative difference is powerful for content that relies on reveals, surprises, or the unveiling of information. Consider a quiz TikTok where the question is spoken aloud and the answer flips into view. The Flip Card animation makes the answer feel like it was there all along, hidden, waiting to be shown — which is exactly the quiz metaphor. Or consider a before/after video where the 'after' result flip-cards into view — the rotation suggests transformation, like flipping a playing card to show its face. No other effect creates this narrative of hidden-then-revealed. Fade In suggests materialization. Bounce suggests arrival. Scale Up suggests amplification. Only Flip Card suggests revelation.
02
3D Effects in Export: What to Expect
Since Flip Card uses CSS 3D transforms that are rendered by the browser engine during Remotion's export process, the 3D perspective is baked into every frame of your exported MP4 at full quality. The perspective distortion, rotation, and depth effects look identical in the exported video to what you see in the preview player. There's no quality loss or simplification during export — each frame is rendered at the full resolution with accurate 3D transformation. One practical consideration: Flip Card's 3D rotation is most visible and impressive when the text has some width to it. Very short words (1-2 characters) don't show much perspective distortion during rotation because there isn't enough horizontal extent for the depth to be noticeable. For maximum impact, use Flip Card on pages with 3-5 words that span a good portion of the frame width. This gives the rotation enough visual surface area for the 3D effect to read clearly.
Frequently Asked Questions
Everything you need to know before you start.
Can't find what you're looking for? Contact us
Flip Card rotates on the Y-axis (vertical axis — like a playing card turning face-up), while Flip Up rotates on the X-axis (horizontal axis — like a book opening toward you). Flip Card suggests 'revealing the other side,' Flip Up suggests 'rising into view.' Both use 3D perspective but create different visual narratives.
No. CSS backface-visibility is set to hidden, and opacity transitions to fully visible only after the text passes the 90-degree perpendicular midpoint. This means you never see mirrored/reversed text during the animation — the word is invisible during the first half of the rotation and cleanly visible during the second half.
You can, but the dramatic reveal loses impact with repetition. Flip Card works best when used selectively for moments that deserve reveal energy — key statistics, answers, surprising statements. Use a subtler effect (FadeIn, MaskSlide) for regular captions and reserve Flip Card for emphasis. This contrast makes each flip feel like an event.
Yes. The Y-axis rotation works in any aspect ratio. In 9:16 vertical video, the narrower frame means the perspective distortion is more concentrated, which can actually make the 3D effect more visually dramatic than in wide 16:9 video. Flip Card is a strong choice for vertical content.