# 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.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/flip/
>
> 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.

## Related

- [Hum](https://bettertyped.github.io/react-cards-opening/docs/effects/hum/)
- [Burst](https://bettertyped.github.io/react-cards-opening/docs/effects/burst/)
- [Foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)
- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)

Source: https://bettertyped.github.io/react-cards-opening/docs/effects/flip/