There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.
https://desandro.github.io/3dtransforms/examples/card-01.htm...
#card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
I like the svg suggestion.
https://commons.wikimedia.org/wiki/Category:SVG_playing_card...
https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
Only thing about is that it easily looks like crap. I mean if you don't curl & flip the card looks too solid..but I'll check it out.
It would be difficult to practice sleight of hand.