カード扇形展開（ホバー）
重なった 3 枚のカードにマウスを乗せると、左右のカードが扇のように開く CSS のみのインタラクションです。 position:absolute で同じ位置に積み、 :hover 時に両脇のカードへ translateX と rotate を与えて広げています。
解説
重なった 3 枚のカードにマウスを乗せると、左右のカードが扇のように開く CSS のみのインタラクションです。position:absolute で同じ位置に積み、:hover 時に両脇のカードへ translateX と rotate を与えて広げています。動きは transition に cubic-bezier のイージングを設定しているため、ぱっと開いてふわっと止まる軽快な質感になります。
向く場面
- 料金プランや特集を遊び心のある見せ方で提示するカード群
- ポートフォリオのサムネイルを束ねたサムネスタック
- トランプ風のゲーム的な UI アクセント
開き幅は translateX の値、傾きは rotate の角度で調整します。枚数を増やす場合は各カードに個別の変形量を割り当ててください。ホバー前提なのでタッチ端末では開かない点に注意し、スマホでは常時少し開いた初期状態にするか、タップで開く実装に切り替えると操作しやすくなります。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
スマートフォンでも開きますか。
ホバーで開く作りのため、タッチ端末では基本的に展開しません。最初から少し開いた状態にするか、タップやクリックで開く処理を足すと対応できます。
カードを 4 枚以上にできますか。
できます。追加したカードごとに translateX と rotate の値を個別に指定し、扇が均等に広がるよう角度を調整してください。