カード 3D フリップ
このカードはホバーすると Y 軸を中心に半回転し、表面の裏に隠してあった面が出てくる演出です。仕組みは CSS だけで完結していて、外側に perspective で奥行きを与え、内側の fl-card__in に transform-style: preserve-3d を指定。
解説
このカードはホバーすると Y 軸を中心に半回転し、表面の裏に隠してあった面が出てくる演出です。仕組みは CSS だけで完結していて、外側に perspective で奥行きを与え、内側の fl-card__in に transform-style: preserve-3d を指定。表面と裏面の両方に backface-visibility: hidden を付け、裏面はあらかじめ rotateY(180deg) で反転させておくのがポイントです。ホバー時に内側を 180 度回すと裏面が正面を向きます。cubic-bezier のイージングで回転に弾みが付きます。
使いどころ
- 商品カードの表に写真、裏に価格や特徴を畳んで情報量を抑える
- 料金プランの裏に詳細スペックや CTA ボタンを隠す
- メンバー紹介で表に顔写真、裏に経歴やSNSリンクを載せる
裏面のグラデーションは linear-gradient の 2 色を変えるだけでブランドに合わせられます。注意したいのは、回転中は裏面の文字が読みづらい点と、タッチ端末ではホバーが効かない点です。スマホ向けにはタップで .is-flipped クラスを付け替える方式を併用すると確実です。動きを抑えたい利用者のために prefers-reduced-motion で transition を無効化する配慮も入れておくと親切です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
スマホのタップでも裏返せますか？
このサンプルはホバー前提なので、タッチ端末では反応しません。タップで裏返したい場合は、クリックで .is-flipped のようなクラスを付け外しする数行の JavaScript を足し、そのクラスが付いたときに内側を回す CSS を追加すると、スマホでも動かせます。
裏面の色やデザインは変えられますか？
裏面 fl-card__b の背景はグラデーション 2 色で指定しているので、その色をブランドカラーに差し替えれば印象が変わります。表面 fl-card__f も背景や角丸、影を自由に編集できます。サイズはカード外側の幅と高さの値で調整してください。