フリップ表裏カード（3D）
マウスを乗せると前後 2 面が立体的に入れ替わる 3D フリップカードです。親に perspective:1000px で奥行きを与え、内側の要素に transform-style:preserve-3d を指定したうえで、ホバー時に rotateY(180deg) で半回転させます。
解説
マウスを乗せると前後 2 面が立体的に入れ替わる 3D フリップカードです。親に perspective:1000px で奥行きを与え、内側の要素に transform-style:preserve-3d を指定したうえで、ホバー時に rotateY(180deg) で半回転させます。表裏それぞれの面には backface-visibility:hidden が付き、回転中に裏側が透けないようになっています。アニメーションは cubic-bezier のイージングで滑らかに切り替わり、JavaScript は不要です。
こんな場面で使えます
- 表に商品名、裏に詳細を載せるユニークな紹介カード
- メンバー紹介で表に写真、裏にプロフィール
- FAQ で表に質問、裏に回答を見せる遊び心のある演出
カスタマイズは width と height でカードサイズを決め、表裏の背景色やグラデーションを差し替えれば印象が変わります。注意点として、ホバーが効かないタッチ端末では裏面が出せないため、スマホ主体のサイトでは click でクラスを切り替える方法を併用すると安心です。回転が苦手なユーザー向けに prefers-reduced-motion で動きを抑える配慮もしておくと丁寧です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
スマートフォンでも裏面を表示できますか。
このサンプルはホバーで反転するため、ホバーのないタッチ端末では裏面が出せません。スマホ対応するには、JavaScript でタップ時に反転用のクラスを付け外しする仕組みを足すと、クリックでも表裏を切り替えられます。
回転がぎこちなく見えないか心配です。
回転は cubic-bezier のイージングで滑らかに動くよう調整されています。動きが苦手な人のために、prefers-reduced-motion の指定で反転アニメを弱める、または一瞬で切り替えるよう配慮すると親切です。