Movatterモバイル変換

[0]ホーム
URL:

Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for A (more) realistic card flip animation
Timothy Foster
Timothy Foster

Posted on • Originally published atauroratide.com

     

A (more) realistic card flip animation

There are a lot of cards on the internet, and a lot of them flip, revealing double-sided content. But the way so many of them flip is not...anatomically correct.

My old writing classes told me to show rather than tell: Which one of these cardsfeels better?

The first card, a Pichu, does a normal 180-degree turn. The second card, a Raichu, lifts up off the page while doing a 180-degree turn.

The Pichu card is how basically every tutorial tells you how to make a card flip animation. Thing is, real-life cards just don't work that way...

Animation of someone trying to flip a card over without it leaving the table goes poorly.

Cards cannot flipinto the table.

The Raichu card realizes two subtle details:

  • A real-life card needs to be lifted to be flipped.
  • A real-life card has thickness.

Subtlety is the difference between something feelinggood and something feelingsatisfying.

Level -1: Cheating with a component

I was originally going to just write about how to make a cool flip animation, but I got alittle carried away and ended up creating a fully reusable component. Oops 🙂

Install@auroratide/flip-card and you get aweb component which can be used in any framework, be it React, Svelte, Vue, or vanilla.

<flip-card><sectionslot="front"><p>The front!</p></section><sectionslot="back"><p>The back!</p></section></flip-card>
Enter fullscreen modeExit fullscreen mode

What is a web component?

Web components create new semantics through custom HTML elements. If you ever told yourself, "Dang, I wishthis were just a regular HTML element," then web components let you do just that: make it one!

Level 0: The Basic Card

The basic card we know and love relies on a few key CSS features:

It's really just two same-sized section boxes on top of each other, with one flipped 180 degrees and its backside invisible. Then rotate their container to reveal the second box's content.

A ton of tutorials already go into detail about how this works, so I'll just link all the appropriate documentation and throw some annotated code here. This'll serve as the base for climbing the Ladder of Card-Flip Enlightenment.

HTML

<articleclass="perspective-container"><divclass="card"><sectionclass="front face"aria-hidden="false"></section><sectionclass="back face"aria-hidden="true"></section></div></article>
Enter fullscreen modeExit fullscreen mode

CSS

.perspective-container{perspective:100em;/* creates an illusion of depth */perspective-origin:center;}.card{width:15em;aspect-ratio:5/7;position:relative;transform-style:preserve-3d;}.card.face{/* Hide the backside of the element, for when it is rotated */backface-visibility:hidden;}.card.back{/* The front and back elements occupy the same space */position:absolute;inset:0;transform:rotateY(180deg);}.cardsection{width:100%;height:100%;}/* Later sections will add code to actually flip the card *//* We'll be applying transformations to the .card class mainly */
Enter fullscreen modeExit fullscreen mode

Level 1: Verticality

When you flip a real-life card, you have to lift it off the surface first, otherwise the card melds into the table. Or more realistically the cardbends, cursing you for 7 years.

The traditional approach uses thetransition CSS property, but all it's able to do is smoothly take you from one state (rotateY(0deg)) to a different state (rotateY(180deg)). In the case of lifting a card, the start and end states are the same. We need amiddle state where the card is lifted vertically, therefore we need a more powerful CSS tool.

Let's use@keyframes andanimation!

Give me annotated code!

CSS

@keyframesflip-to-front{0%{transform:translateZ(0em)rotateY(-180deg);}50%{transform:translateZ(var(--flip-height))rotateY(-270deg);}100%{transform:translateZ(0em)rotateY(-360deg);}}/* I'm using a second animation for two reasons:  *  1. It allows the card to always flip in one direction. *  2. The renderer only plays an animation if it changes. */@keyframesflip-to-back{0%{transform:translateZ(0em)rotateY(0deg);}50%{transform:translateZ(var(--flip-height))rotateY(-90deg);}100%{transform:translateZ(0em)rotateY(-180deg);}}.card{--flip-height:17.5em;animation-duration:0.75s;animation-fill-mode:both;animation-timing-function:linear;/* NOTE: We're NOT setting the animation with CSS *//* By using Javascript, it's easier to prevent the animation from playing as soon as the page loads. */}
Enter fullscreen modeExit fullscreen mode

Javascript

functionflipCard(card){card.classList.toggle("facedown")constisFacedown=card.classList.contains("facedown")card.style.animationName=isFacedown?"flip-to-back":"flip-to-front"}
Enter fullscreen modeExit fullscreen mode

Level 2: Thickness

Real-life cards have small, albeit non-zero, thickness. And with the power of 3D CSS, we can give our virtual cards thickness too! The effect is subtle but makes the rotation feel much more physical.

The strategy here is to assemble four emptydiv blocks, representing the card's edges. We'll make them as wide/high as the card's thickness,position them along the card's borders, and thenrotateY them into the page.

Give me annotated code!

HTML

<divclass="card"><sectionclass="front face"aria-hidden="false"></section><sectionclass="back face"aria-hidden="true"></section><!-- NEW! We need divs that represent the 4 edges --><divclass="top edge"></div><divclass="right edge"></div><divclass="bottom edge"></div><divclass="left edge"></div></div>
Enter fullscreen modeExit fullscreen mode

CSS

.card{--card-depth:0.25em;/* Without special corner logic, a card with thickness cannot have border radius */border-radius:0;}.card.back{/* Push the back of the card backward to give space for the edges to live */transform:translateZ(calc(-1*var(--card-depth)))rotateY(180deg);}.edge{position:absolute;background-color:black;}/* All of this code is aligning the edges, rotating them into the page */.right,.left{width:var(--card-depth);height:100%;inset-block:0;}.right{inset-inline-end:0;transform:rotateY(270deg);transform-origin:rightcenter;}.left{inset-inline-start:0;transform:rotateY(90deg);transform-origin:leftcenter;}.top,.bottom{width:100%;height:var(--card-depth);inset-inline:0;}.top{inset-block-start:0;transform:rotateX(270deg);transform-origin:centertop;}.bottom{inset-block-end:0;transform:rotateX(90deg);transform-origin:centerbottom;}
Enter fullscreen modeExit fullscreen mode

Level 3: Round Corners + Thickness

Ever tried making a rotating cylinder with CSS? Turns out you can't, because CSS doesn't have 3D curved surfaces. The most reasonable way is tosimulate a cylinder with a bunch of thin flat surfaces.

Once our card acquires thickness, any rounded corners suddenly become quarter-cylinders. Therefore, we needadvanced magic math to make them look correct!

The strategy is to simulate each rounded corner as a series of small, flatdivs arranged into quarter-circles whose radii are equal to the card's border radius. The number ofdivs we use is what I'm calling the--corner-granularity. Higher corner granularity means a smoother corner, but moredivs being used.

Give me annotated code!

HTML

<divclass="card"><!-- ...front, back, sides... --><divclass="top-right corner"><divstyle="--i: 0;"></div><divstyle="--i: 1;"></div><divstyle="--i: 2;"></div></div><divclass="bottom-right corner"><divstyle="--i: 0;"></div><divstyle="--i: 1;"></div><divstyle="--i: 2;"></div></div><divclass="bottom-left corner"><!-- ... --></div><divclass="top-left corner"><!-- ... --></div></div>
Enter fullscreen modeExit fullscreen mode

CSS

.card{/* The number of faces used to simulate a round corner. More faces means more smooth. */--corner-granularity:3;--border-radius:1.5em;border-radius:var(--border-radius);}.corner>*{background-color:black;}/* We have to override the edges so they do not overlap the corners */.right,.left{inset-block:var(--border-radius);height:calc(100%-2*var(--border-radius));}.top,.bottom{inset-inline:var(--border-radius);width:calc(100%-2*var(--border-radius));}.corner{--n:var(--corner-granularity);--r:var(--border-radius);position:absolute;transform-style:preserve-3d;}/* A corner is composed of a finite number of flat faces that, when arranged in just the right way, looks rounded. *//* We need to do it this way because curved 3D surfaces do not exist in CSS. */.corner>*{position:absolute;inset-block-end:0;width:var(--card-depth);height:calc(2*var(--r)*sin(45deg/var(--n)));transform-origin:bottomcenter;/* This math constructs a single corner. *//* I derived it on a paper somewhere and threw it away, *//* so you'll have to derive it yourself if you want to understand what's happening (: */transform:translateZ(calc(var(--r)*cos(var(--i)*90deg/var(--n))))translateY(calc(-1*var(--r)*sin(var(--i)*90deg/var(--n))))rotateX(calc(45deg*(2*var(--i)+1)/var(--n)));}/* The rest of this code slots the corners where they belong. */.top-right{inset-block-start:0;inset-inline-end:0;transform:rotateY(90deg)translateZ(calc(-1*var(--r)))translateY(var(--r));}.bottom-right{inset-block-end:0;inset-inline-end:0;transform:rotateY(90deg)rotateX(270deg)translateZ(calc(-1*var(--r)))translateY(var(--r));}.bottom-left{inset-block-end:0;inset-inline-start:0;transform:rotateY(90deg)rotateX(180deg)translateZ(calc(-1*var(--r)))translateY(var(--r));}.top-left{inset-block-start:0;inset-inline-start:0;transform:rotateY(90deg)rotateX(90deg)translateZ(calc(-1*var(--r)))translateY(var(--r));}
Enter fullscreen modeExit fullscreen mode

Level 🧠: Keep Accessibility in mind!

Accessibility is the practice of considering all the people who might use your website and making it usable by as many of them as possible. Flippy cards can create a few pitfalls if we're not careful!

  • What if the person cannot use a mouse? Is hover the only way to flip your card?
  • What if the person uses theTab key to navigate? Will they run into a button hidden on the backside of your card?
  • What if the person uses ascreenreader to read the page's content aloud? Will it read content hidden on the backside of the card?
  • What if the person prefers less animation? Will the card's flip animation be jarring to them?

While it isn't the point of this article explore accessibility, these are nonetheless important questions to consider. Here are some tools you can use to address them.

Obligatory Conclusion

Ok I admit, nothing's actuallywrong with the normal card flip and the tutorials that teach it ❤️ I mean, why can't it represent a card flip happening in mid-air?

I just wanted to share something I tried and liked, and if you like it, feel free to use it too!

Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
jimsaiya profile image
Jim Saiya
  • Joined
•

Dude, the video is just hilarious. 😂 But we do feel sorry for the little card. 🥺

CollapseExpand
 
best_codes profile image
Best Codes
I love coding, 3D designing, and listening to music.I'm currently a fanatic about Rust, TypeScript, and Next.js.Christian, Coder, Creator
•

This is awesome! I love animating with CSS and JS. Very cool project!

CollapseExpand
 
auroratide profile image
Timothy Foster
Trying to make the world a funner place through coding.
  • Location
    Dallas
  • Pronouns
    he/him
  • Work
    Software Engineer
  • Joined
•

Let me know if you've seen other creative animations or have ways to improve this!

CollapseExpand
 
dannyengelman profile image
Danny Engelman
Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
  • Email
  • Location
    Amsterdam, the Netherlands
  • Education
    TRS-80 Scriptkiddie '79+ 🎓 Computer Science '87 - '92 ❤️ Online since 1990
  • Work
    I guide people with PTSD, Autism, or general burnout towards a career in web development
  • Joined
•• Edited on• Edited

I am still looking for acool realisticfold animation.

Several people took a shot at it:StackOverflow Feb'23

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Trying to make the world a funner place through coding.
  • Location
    Dallas
  • Pronouns
    he/him
  • Work
    Software Engineer
  • Joined

More fromTimothy Foster

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account
[8]ページ先頭
©2009-2025 Movatter.jp