CSSで作るフリップカード！CSSトランジションチュートリアル１

この記事は、CSSトランジションの実践チュートリアルを提供するものです。
今回は、フリップカードの作り方を見ていきましょう。
 
Download the Source
View the Demo
 
 
フリップカード
 
最近注目のフリップカード。画像の裏に情報があるものが代表的ですね。今回は、両面にdivを使って作っていきます。以下は、今回作成する３つのエフェクトです。
 
ホバー：カード上のホバーで、カードが裏返る。
クリック：クリックで、カードが裏返る。
ランダム：ランダムにカードが裏返る。
 
早速進めていきましょう。
 
 
マークアップ
 
マークアップは親要素一つと、カードの前面と背面を示す子要素二つでできています。こちらがカード一枚のマークアップです。
親要素の”EFFECT”には、どのエフェクトを作るかによってhover, click, randomを指定します。
 
 
トランジションの作り方
 
フリップカードは、背面が前面に重なって、かつ隠れていることと、トランジション時に両面が同時に回転することが必須です。トランジションは画面の中心から伸びる以下の3つの軸の一つを中心に作ります。
 
X軸：左右

リンク元