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

この記事は、CSSトランジションの実践チュートリアルを提供するものです。

今回は、フリップカードの作り方を見ていきましょう。

 

Download the Source

View the Demo

 

 

フリップカード

 

最近注目のフリップカード。画像の裏に情報があるものが代表的ですね。今回は、両面にdivを使って作っていきます。以下は、今回作成する３つのエフェクトです。

 

1. ホバー：カード上のホバーで、カードが裏返る。
2. クリック：クリックで、カードが裏返る。
3. ランダム：ランダムにカードが裏返る。

 

早速進めていきましょう。

 

 

マークアップ

 

マークアップは親要素一つと、カードの前面と背面を示す子要素二つでできています。こちらがカード一枚のマークアップです。

親要素の”EFFECT”には、どのエフェクトを作るかによってhover, click, randomを指定します。

 

 

トランジションの作り方

 

フリップカードは、背面が前面に重なって、かつ隠れていることと、トランジション時に両面が同時に回転することが必須です。トランジションは画面の中心から伸びる以下の3つの軸の一つを中心に作ります。

 

X軸：左右

Y軸：上下

Z軸：奥行

 

フリップはX軸かY軸で得られますが、本記事ではY軸を使用します。

 

両面を重ねるために、両面のpositionプロパティは”absolute”を使用します。また、両面が同じカード内に収まるように、カードは”relative”に設定します。この上で、widthやheightを設定するか、片面に画像などのメディアを指定しておきましょう。片面にメディアを指定する場合、absoluteはどちらか片面で構いません。

 

また、カードに余白（背景や画像がない）がある場合は、逆面が透けないように、backface-visibilityプロパティを”hidden”に指定しておきましょう。

 

本記事では、パディングを使用してカードを正方形にしています。

 

 

共通のCSS

 

３つのエフェクト共通のCSSを見てみましょう。

本記事ではカードを一列に4枚置いているので、widthを25%に設定し、正方形を得るため、padding-bottomも25%にしました。これでカードの両面を絶対配置にできます。また、transitionをtransformに設定しています。背面はX軸に-180度回転し、前面はデフォルトのままになるよう設定します。

 

では、各エフェクトを見ていきましょう。

 

 

エフェクト１：ホバー

このエフェクトは擬似クラス:hoverで簡単に作れます。カード上でホバーするとカードの前面が-180度回転し、背面は0に移動します。以下がCSSです。

 

エフェクト２：クリック

こちらでは、クリックでエフェクトを開始します。二回目のクリックで確実にカードが元に戻るようにclassなどを確認するため、少しJavaScriptをいじります。

以下がCSSです。

こちらがJavaScript。

 

エフェクト３：ランダム

ランダムになエフェクトは、JavaScriptに複数のタイムアウトを設定する必要があり、少し手間がかかります。マークアップにもカスタムデータ属性を使用します。

こちらがマークアップです。

CSSはほぼ同じですが、以下を参照してください。

次に、少し複雑なJavaScriptです。1〜3秒の間隔のタイムアウトとリセットを繰り返し、ランダムなトランジションを作ります。

こちらがJavaScriptです。

 

 

ブラウザーサポート

 

最後に、ブラウザーでトランジションが機能するかを検出できるModernizrというサービスを紹介します。トランジションが機能しない場合は、適切な対処をしておきましょう。

 

 

※本記事は、Simple CSS Transition, Transform & Animation Tutorialを翻訳・再構成したものです。