フリップカード
フリップカードは、カードをマウスで重ねると表面が裏返り、裏面の詳細が現れる立体的な演出です。この実装は JavaScript を一切使わず、CSS だけで成立しています。内側の .fc__in に transform-style:preserve-3d と perspective:900px を与え、ホバー時に r…
解説
フリップカードは、カードをマウスで重ねると表面が裏返り、裏面の詳細が現れる立体的な演出です。この実装は JavaScript を一切使わず、CSS だけで成立しています。内側の .fc__in に transform-style:preserve-3d と perspective:900px を与え、ホバー時に rotateY(180deg) で回転。表裏の面には backface-visibility:hidden を指定して、裏返ったときに反対側が透けないようにしています。回転は transition:transform .6s でなめらかにつながります。
使う場面
- サービス一覧で、表に名称・裏に料金や補足を出す
- メンバー紹介で、写真と経歴を切り替える
- 用語カードやクイズなど、答えを隠して見せたい場面
回転の速さは transition の秒数、奥行き感は perspective の値で調整できます。注意点として、ホバーが効かないタッチ端末ではクリックで切り替える JavaScript を足すと安心です。また 動きを抑える設定をした利用者には prefers-reduced-motion で回転を弱めると親切です。
使用例・適したシーン
- SPA / PJAX 風 Web サイト
- ポートフォリオの遷移演出
よくある質問
スマホのタップでも裏返せますか
この実装はホバーで動くため、タッチ端末では裏返りません。クリックでクラスを付け外しする数行のJavaScriptを足すと、タップでも切り替えられます。
回転の速さは変えられますか
はい。.fc__in の transition の秒数を変えるだけです。0.6秒を0.4秒にすればキビキビ、0.9秒にすればゆったりした印象になります。