(Sample)
こんにちは。ゆうせいです。
今回は、トランプカードのような要素を「ダブルクリック」でめくる表現を、HTML・CSS・JavaScriptで実装する方法を丁寧に解説していきます！
実際に手でカードをめくるようなアニメーションを画面上で実現できたら、インタラクティブなコンテンツ作りにも一歩近づけますよ！
完成イメージ
- 初期状態ではカードの裏面（back.jpg）が見えている。
- ダブルクリックすると、スムーズにカードが回転して表面（front.jpg）が表示される。
- 再度ダブルクリックで裏面に戻る。
仕組みを大まかに説明すると…
- HTMLで「カード構造」を定義
- CSSで「3Dの回転アニメーション」を設定
- JavaScriptで「ダブルクリックでクラスの切り替え」を制御
では、一つずつ分解して見ていきましょう！
HTML：カードの土台をつくる
<div class="card" id="card">
<div class="card-inner">
<div class="card-back"></div>
<div class="card-front"></div>
</div>
</div>
| 要素名 | 内容・役割 |
|---|---|
.card | カードの枠。全体の表示サイズ・視点（perspective）を定義。 |
.card-inner | 回転アニメーションが発生する部分。3D回転の対象になる。 |
.card-front | 表面の画像領域（初期は非表示） |
.card-back | 裏面の画像領域（初期は表示） |
CSS：回転アニメーションの設定
回転の仕組みを理解しよう
.card {
perspective: 1000px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.is-flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
専門用語解説
| プロパティ | 解説 |
|---|---|
perspective | 3D回転を実現するための視点距離（奥行き） |
preserve-3d | 子要素のZ軸方向の並びを保持する |
rotateY(180deg) | Y軸方向（縦軸）で180度回転 |
backface-visibility: hidden | 裏面を非表示にすることで、両面表示を防ぐ |
JavaScript：ダブルクリックで切り替える
document.querySelector("#card").addEventListener("dblclick", function () {
this.classList.toggle("is-flipped");
});
解説
dblclickイベントは、素早く2回クリックしたときに発火。.classList.toggle()は、クラスを追加・削除する関数。
つまり、「is-flipped」というクラスを付けたり外したりすることで、CSS側で表裏を切り替えるようになっています。
カードが回転する仕組みを図で理解！
【初期状態】
.card-inner は rotateY(0deg) → 表面：非表示／裏面：表示
【is-flipped クラスが付与されると】
.card-inner が rotateY(180deg) → 表面：表示／裏面：裏に回る
画像が見えない場合のチェックポイント
- 画像のURLが正しいか：
front.jpg,back.jpgが実際に存在している？ - CORS（クロスドメイン）制限に引っかかっていないか？
background-size: coverを指定しても画像が小さいと見えない場合あり
発展アイデア！
| アイデア | 内容 |
|---|---|
| ワンクリック対応にする | click イベントに変更 |
| 複数カード対応 | querySelectorAll() と forEach を使って複数のカードを制御 |
| 回転方向をランダムに | rotateY → rotateX に変更して縦に回転なども可 |
| トランプ絵柄をランダムに設定 | JavaScriptで画像をランダムで入れ替えるようにする |
今後の学習のステップ
このコードで学べた技術：
- CSSの3Dトランスフォーム（
transform,rotateY,backface-visibility） - クラスのトグル操作でスタイルを切り替える
- JavaScriptの
dblclickイベント活用
次は以下のような応用にも挑戦してみてください！
- アニメーションを連続クリックに対応させる（クリック連打対策）
requestAnimationFrameを使って手作りアニメーションを作ってみる- JavaScriptだけでカードの中身をランダム生成する
動きのあるインターフェースは、ユーザーにとっても開発者にとっても楽しい要素です！どんどん試して、表現力をアップさせてくださいね。質問があればいつでもどうぞ！