CSSとJSで作成したWEBタロットです。左上のデッキからカードをめくるように展開します。タロットカードには大アルカナと呼ばれる22枚と小アルカナ56枚があります。そのどちらでも好きな方で占えるようにしました。
WEBタロット実装サンプル：https://labo.studio-happyvalley.com/tarot/

左上のカードをクリックするたびにカードが開き所定の位置へ移動します。展開するスプレッドは一番有名なケルト十字法で、占法はタロット・グランド・マスターのレイチェル・ポラックに従いました。
開く順に
1.Cover
2.Cross [Top is left side.]
3.Basis
4.Recent Past
5.Possible Outcome
6.Near Future
7.Self
8.Environment
9.Hopes and Fears
10.Outcome
となってます。使い道としてはタロット初心者のリーディング練習用にいいかもしれませんね。ｗ

カードが展開されるときに裏から表にひっくり返る動きはtranscorm 3DでZ軸を180度回転させてます。スプレッドの場所もtranslateであらかじめ設定してあります。Flash なんかだとアニメーションの軌跡をカーブで制御できるんですが、CSS3ではまだ無理のようです。
後はjavascriptでイベントを管理しているくらいですね。

以前、CSS3でカードめくりの記事を書いたときに何か実用的なものがつくれそうだなと感じてました。
最初は神経衰弱みたいなゲームを考えました。
まあ、それもいいけどまずはもう少し簡単なものをと考え・・・昔から好きだったタロットが面白いんじゃないかと思いこれに決めました。
タロットにはいくつかの占い用のスプレッドがありますよね。でもやっぱりタロットといえばケルト十字ですね。
ということでWEBで楽しむケルト十字によるタロット占いです。
最初は全部だと数が多すぎて面倒なので大アルカナだけで実装しましたが、やはり小アルカナもないと大味すぎてイマジネーションが沸きません。大変でしたが全カードで占えるようにしました。
占い結果を宣言できると面白いんですが、条件分岐などかなりの工数が必要ですね。