フリップカード メンバー紹介

このパーツの使いどころと実装ポイント

このパーツは、ホバーするとカードが3D回転して裏面のプロフィールが現れるメンバー紹介です。要点は3つの CSS プロパティで、親に perspective:1000px で奥行きを与え、回転する内側に transform-style:preserve-3d を指定し、表裏それぞれに backface-visibility:hidden を付けて裏面が透けないようにします。ホバーで内側を rotateY(180deg) 回し、表（写真・氏名・役職）から裏（紹介文）へ滑らかに切り替えます。

向いている場面

少人数のチーム紹介、士業や講師のプロフィール、登壇者一覧など、限られた面積で表に見栄え・裏に詳細を両立したい場面に向きます。表側で顔と肩書きを見せ、裏側に経歴や担当領域を畳み込めるため、情報量と一覧性のバランスが取りやすい構成です。

カスタマイズと注意点

• カード高さは 280px 固定です。裏面の文章を長くするとはみ出すため、文量に合わせて高さを調整してください。
• 表裏は同じ枠に重なるので、写真の div を実写の img に差し替える際もアスペクト比を保ちます。
• ホバー依存はタッチ端末で反応しません。スマホではタップで is-flipped クラスを付け外しする JS を併用するか、裏面を常時表示にフォールバックさせると親切です。