View Transitions による3Dカードフリップ

CSS で本物の3Dフリップ

コツは、スナップショット擬似要素の親に perspective を適用し、スナップショット自身に rotateY をかけることです。

::view-transition-group(card) {
  perspective: 1000px;
}
@keyframes flip-out {
  to { transform: rotateY(90deg); opacity: 0; }
}
@keyframes flip-in {
  from { transform: rotateY(-90deg); opacity: 0; }
}
::view-transition-old(card) {
  animation: 300ms ease-in both flip-out;
}
::view-transition-new(card) {
  animation: 300ms 280ms ease-out both flip-in;
}

280ms の delay

flip-in アニメーションの delay に注目してください。これがないと両スナップショットが同時に回転し、3D空間で重なって見えて壊れた印象になります。delay によってカードが実際に180°回転したような知覚的錯覚が生まれます。

::view-transition-group vs ::view-transition-old／new

::view-transition-group(card) 擬似要素は old と new 両方のスナップショットの コンテナ です。group に perspective を設定することで、内部スナップショットの rotateY 変換が真の3D空間で解釈され、2D歪みになりません。

裏面の可視性

デフォルトでは回転中のカードの裏面が見えてしまいます。きれいに隠すには:

::view-transition-old(card),
::view-transition-new(card) {
  backface-visibility: hidden;
}

控えめに使う

3Dフリップは目を引きますが高コストで、ブラウザがスナップショットを2Dレイヤーとして最適化することを妨げます。グリッド全体ではなく、トランジションあたり1〜2枚に限定してください。