Flippin' Card Flipper-o-matic

Flipper-Front

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Some more stuff

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Flipper-Back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Some more stuff

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Notes

  • z-index of flipper front is 2
  • all styles are set on the flipper-card-[ ] elements
  • flipper-card-wrapper set to relative position
  • flipper-cards set to absolute position and to fill space
  • Need an extra wrapper that you can cover over (so it doesn't change size) - flipper-wrapper-main
  • flipper-wrapper-main is where the interaction is set and DOES NOT flip.
  • flipper-card-wrapper does the flipping
  • All cards are currently set with min H & W of 30rem.
  • HUGE trick that makes it not glitchy is getting the Positions set right - pay attention to what's Absolute and what's relative
Built for you by avianu.