Shuffle小アルカナも使用
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
Tarot
カードをクリックORタップすると占い開始です。
初期設定は大アルカナのみで占います。
「shuffle」ボタンでカードをシャッフルします。
開いたカードをクリックすると説明が表示されます。
Tarot
Tarot
Tarot
Tarot
Tarot
Tarot
Tarot
Tarot
Tarot
Tarot

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

技術的にはCSS アニメーションtransform-functionを使用しています。