モダンCSS・プラットフォーム
モーフ遷移（View Transitions）
カードをタップすると、そのサムネがそのまま拡大して詳細へなめらかに変形する。View Transitions APIで一覧⇄詳細をモーフさせる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
View Transitions API（document.startViewTransition）で「同一ページ内」の一覧⇄詳細をモーフさせる例です。要になるのは、変形させたい2要素に同じ view-transition-name を付ける点（ここでは一覧サムネと詳細ヒーローに 'vt-hero'）。同名の要素は同時に2つ表示できないため、遷移の前後で付け外ししています。未対応ブラウザでは自動的に即時切り替えにフォールバックします。ページ間（MPA）遷移に使う場合は CSS の @view-transition { navigation: auto; } を併用します。
コード（コピーして使えます）
<div class="vt-root">
<ul class="vt-grid" id="vt-grid">
<li><button class="vt-card" data-i="0"><span class="vt-thumb t0"></span><span class="vt-cap">Aurora</span></button></li>
<li><button class="vt-card" data-i="1"><span class="vt-thumb t1"></span><span class="vt-cap">Sunset</span></button></li>
<li><button class="vt-card" data-i="2"><span class="vt-thumb t2"></span><span class="vt-cap">Ocean</span></button></li>
<li><button class="vt-card" data-i="3"><span class="vt-thumb t3"></span><span class="vt-cap">Forest</span></button></li>
</ul>
<div class="vt-detail" id="vt-detail" hidden>
<span class="vt-thumb vt-thumb-lg" id="vt-hero"></span>
<div class="vt-body">
<h3 id="vt-title">Aurora</h3>
<p id="vt-desc"></p>
<button class="vt-back" id="vt-back">← 一覧へ戻る</button>
</div>
</div>
</div>