カード反転
ホバー（PC）またはタップ（スマホ）でカードがY軸回転して裏面を表示。transform-style: preserve-3d＋backface-visibility: hiddenで実装。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 表に要約・裏に詳細の2面カード
- 暗記カード・プロフィール
- タップとキーボードで裏返せる小さな情報
- 避ける場面
- 裏面の情報が必須で隠してはいけない
- 一覧に大量に並べる
- outline:none のままフォーカスが見えない状態で使う
- 構成要素
- シーン
- カード
- 表面
- 裏面
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でカードへ（tabindex=0）・Enter／Space で反転（keydown 実装あり）
- 支援技術
role=button＋tabindex=0＋aria-label=カードを反転、aria-pressed で表裏を同期。裏面は backface-visibility で隠れるが読み上げは両面。focus-visible の輪郭あり。reduced-motion では回転せず即時に裏返る
- 動き
rotateY 180° を 0.55s cubic-bezier(.4,0,.2,1)。裏返る物理感。reduced-motion では即時
デザインの要点
- 表裏は同じ位置に絶対配置し、裏面だけ最初から rotateY(180deg) にしておく。カード全体を 180° 回すと裏面が正面を向く
- backface-visibility:hidden を両面に付ける。無いと回転の途中で裏面が鏡文字のまま透けて見える
- perspective はカードではなく親の scene に付ける。カード自身に付けると回転中に遠近が効かず、平面が回るだけに見える
- outline:none で消したフォーカスは :focus-visible で必ず戻す。Enter で裏返せるのに、どこにフォーカスがあるか見えないのは事故
コード（コピーして使えます）
<div class="fc-scene">
<div class="fc-card" tabindex="0" role="button" aria-label="カードを反転" aria-pressed="false">
<div class="fc-face fc-front">
<div class="fc-front-icon">🎴</div>
<p class="fc-front-label">ホバーで反転</p>
</div>
<div class="fc-face fc-back">
<p class="fc-back-title">ちいつる</p>
<p class="fc-back-desc">小さな道具箱。<br>いつでも使えるWebツール集。</p>
</div>
</div>
</div>