[retrogradeorbit]

There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.

[adam12]

It's done in CSS3 + JS, so it should be pretty easy.

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 ); }

[kenbellows]

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]

http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.

[adam12]

Nice

http://lea.verou.me/css3patterns/#marrakesh

[pakastin]

Thanks, that's great source!

[adam12]

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

https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...

[kenbellows]

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]

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

[chrisseaton]

He means drawing the complex decorative design on the back of most cards.

[ricket]

I had the same thought. You could practice magic tricks if you could flip over the deck and then shuffle and fan it! "Pick a card, any card!"

[pakastin]

I will add flipping ;)

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.

[derrickdirge]

This would only work for a very small subset of card tricks.

It would be difficult to practice sleight of hand.

[pakastin]

Backside added! https://deck-of-cards.js.org/

[teddyh]

The two joker card are also missing for it to be a complete deck.

[pakastin]

Try clicking all kings in a row.. ;)

[pkstn]

:D