Skip to content
react-cards-opening

Flip

The flip is the moment the reveal exists for. The card straightens out of its tilt, turns over on its vertical axis, and the rows on its face rise in from below: picture, name, rarity, text, note.

Press the card, then press it again while it is face down to turn it early.

When it plays

Every card gets it, whatever its tier.

How it is built

Two tweens run together: the card rotates back to level in 0.5 seconds, and its inner layer turns from 180 degrees to 0 in 0.6 seconds on back.out(1.4), so it swings a touch past flat and settles.

The front and back are two layers with backface-visibility: hidden inside a preserve-3d wrapper, under a 1100 pixel perspective. Nothing is swapped mid-turn.

Every element with the class rco-line rises 14 pixels and fades in, 0.06 seconds apart. A face of your own joins in by giving its rows that class.

What changes it

  • renderFace and renderBack on CardOpening draw the two sides.
  • --rco-radius rounds both, and the foil border follows it.

Last updated . Read this page as Markdown.