Studio Happyvalley

CSS
カードめくり

スカートじゃなくて
カードだよ

image: CSSでカードめくり
Toplabo
Upcard

CSS3のperspectiveを使ってカードをめくるアクションを制作してみました。

 | 2021/02/16

概要

  • CSS3のperspectiveを使ってカードをめくるアクションを制作してみました。
    めくる時に単純に画像が切り替わるのではなく奥行きがあるようにパースがついて回転します。そのためにCSS3のperspectiveという仕様を使いました。
    CSSでカードめくりのサンプル:https://labo.studio-happyvalley.com/flip/

機能の説明

  • カードをクリック・タップするとカードが裏返ります。ポイントはカードを上下に2列に並べた時センターがバニシングポイントになるので、回転する時カードの上と下のパースの角度が違うところです。縦3列にするとまたそれに合わせてパースが変化します。

    また、毎回同じ絵だとつまらないのでシャッフル機能も付けました。トランプ占いなんかに使えそうです。

技術仕様

  • CSSのperspectiveを使用しています。詳細は下記のMDNの解説ページで。
    もうひとつ、カードの裏?実は表?の水玉っぽい模様。これもCSS3の背景画像へのグラデーションで制作しました。CSS3だと背景画像を複数設定できるので基本色+透明から設定色を重ねることで模様を作っています。
    ちなみに裏面の絵は大昔に描いたイラストです。最近はWEB案件ばかりなので忘れないようにたまには作品をつくらないといけませんねエ。

後記

  • 掲載が前後しましたが、この研究をベースにWEBタロットを制作しました。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/flip.jpg

シャッフル付きです。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/uc_fig2.png

同じ回転角度でもバニシングポイントの距離によってパースが変化します。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/uc_fig3.png

元画像は大きいので右クリックで大きい画像を見てください。

『CSSでカードめくり』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition