メンバー紹介フリップカード
このパーツは、カードにマウスを乗せると裏返り、表に顔写真と名前・役職、裏にメッセージやSNSリンクを表示するメンバー紹介です。 perspective と transform-style:preserve-3d 、 rotateY(180deg) を組み合わせて立体的な反転を実現しています。
このパーツの使いどころと実装ポイント
このパーツは、カードにマウスを乗せると裏返り、表に顔写真と名前・役職、裏にメッセージやSNSリンクを表示するメンバー紹介です。perspective と transform-style:preserve-3d、rotateY(180deg) を組み合わせて立体的な反転を実現しています。カードは aspect-ratio:3/4 で縦長の比率に固定され、グリッドで自動的に列数が調整されます。
向いている場面
人柄やチームの雰囲気を伝えたいサイトに向きます。たとえば採用ページのスタッフ紹介、士業やコンサルのメンバー一覧、店舗のスタッフ紹介など、表に基本情報・裏に一言メッセージという二段構えが活きる場面で使えます。
カスタマイズと注意点
メンバーを増やすときはカード1枚を複製し、写真・名前・役職・メッセージ・SNSを差し替えます。SNSリンクは実在のアカウントに変えてください。
- ホバーだけでなく
focus-withinでも反転するため、キーボード操作でも裏面を見られます - タッチ端末ではホバーが無いため、タップで反転させるなどの代替を検討するとよいでしょう
- 顔写真は中央に被写体が来るようクロップすると見栄えが整います
よくある質問
スマホのタッチ操作でもカードは裏返りますか？
スマホにはマウスのホバーがないため、そのままではホバーで裏返す動きが働きません。タップで反転を切り替えるJavaScriptを足すか、最初から表裏の情報を1枚に並べて見せるなど、タッチ端末向けの代替を用意するのが安心です。
メンバーの人数が変わってもレイアウトは崩れませんか？
崩れません。カードはグリッドで並んでおり、画面幅とカードの最小幅から列数が自動で決まります。3人でも8人でも自然に折り返して整列するため、人数の増減に強い構成です。