12 ms·

It's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.html https://desandro.github.io/3dtransforms/exam

• chrisseaton 11y ago
  He means drawing the complex decorative design on the back of most cards.
• kenbellows 11y ago
  Sure but implementing the card back image is more difficult, which is what I think the parent post was getting at, rather than the flipping itself. The rest of the page is implemented without any images, which is neat; you'd have to work some SVG magic or something to create e.g. a Bicycle-esque card back without loading an image.
  • jameshart 11y ago
    http://lea.verou.me/css3patterns/ http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.
    • adam12 11y ago
      Nice http://lea.verou.me/css3patterns/#marrakesh http://lea.verou.me/css3patterns/#marrakesh
    • pakastin 11y ago
      Thanks, that's great source!
  • adam12 11y ago
    Displaying an image on a web page shouldn't be that difficult. I like the svg suggestion. https://commons.wikimedia.org/wiki/Category:SVG_playing_cards https://commons.wikimedia.org/wiki/Category:SVG_playing_card... https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_back_01.svg https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
    • kenbellows 11y ago
      It's not about difficulty, it's just fun to try and do it with only web elements, and bonus points for strictly CSS
  • pkstn 11y ago
    I don't see any problem using couple of SVG image files for example.. The problem is that I'm not such a great drawer myself. In the first version I just used big J, Q, K like this: http://pakastin.fi/cards_2006 http://pakastin.fi/cards_2006