♦️[Web #10] Flipping Cards — A Guide for Hype or Whisk

What's nice about this little tutorial about “backface-visibility” is that it works with either Whisk or Hype. Both templates are available for download at Photics.com.

There's also a video, which is part of the Web Design & Web Development playlist on Photics.TV (YouTube).

There have been some improvements to the templates since the video was created.

  • The vanilla HTML, CSS, JavaScript version was inlined for better use with Whisk.
  • A problem with zoom scaling was discovered while making the Raspberry Pi Emoji video. So, that was changed.
  • The Hype version layout was increased from 640x360 to 1920x1080, so it looks less blurry. Scaling up from such a low resolution results in a loss of sharpness.
  • The vanilla version now uses Grid instead of Flexbox for card layout.
  • The vanilla version now supports landscape and portrait. (The card layout will change based on the orientation.)
  • The double border was removed.
6 Likes