View Transitions APIで3Dが動かない原因と対策【開発者向け解説】

なぜ3D View Transitionが動かないのか？開発者が知るべき落とし穴

View Transitions APIはページ遷移を滑らかにする強力な機能だが、3D効果を適用しようとすると意図通り動かないケースが多い。原因はブラウザの実装制限と、CSSプロパティの相互作用にある。本記事では、CSS-Tricksの記事「Why Isn’t My 3D View Transition Working?」を基に、開発者が直面する具体的な問題とその解決策を掘り下げる。

View Transitionsの基本構造と3D遷移の仕組み

View Transitions APIは遷移元と遷移先のスナップショットを取得し、それらをアニメーションで切り替える。3D遷移を実現するには、擬似要素 ::view-transition-old と ::view-transition-new に transform-style: preserve-3d を設定し、親要素でパースペクティブを定義する必要がある。しかし、多くの開発者はこれを単純に追加するだけで動作すると誤解している。

問題の核心：containプロパティとレイヤー分離

View Transitions APIはデフォルトで contain: layout style paint を各遷移要素に適用する。この contain 値が transform-style: preserve-3d の効果を打ち消す。3D空間を維持するには、親要素が子要素の座標系を変形可能でなければならないが、contain: paint がクリッピングを強制し、3Dコンテキストを破壊する。これを回避するには、::view-transition-group に contain: layout style のみを指定し、paint を削除する。ただし、contain: paint を外すとパフォーマンスに影響する可能性があるため、アニメーション中のみ一時的に上書きし、終了後に元に戻す戦略が推奨される。

具体的な解決策と実装パターン

以下のCSSコードは問題を解決する基本的なパターンを示す。

::view-transition-group(*) {
  contain: layout style;
  transform-style: preserve-3d;
}

::view-transition-old(*),
::view-transition-new(*) {
  transform-style: preserve-3d;
}

html {
  perspective: 1000px;
}

この設定で view-transition-name を付与した要素に回転や移動の3Dアニメーションを適用できる。ただし、contain: paint を削除したことによる再描画コストを考慮し、アニメーションフレーム数が増えないようwill-change: transform を活用する。

ブラウザごとの差異と今後の展望

2026年5月現在、Chrome 130以降は上記の回避策で安定動作する。しかし、FirefoxはView Transitions API自体の実装が進行中であり、3D遷移のサポートは実験段階。Safari 18.2では contain: paint の制約が厳しく、代替として isolation: isolate でスタッキングコンテキストを制御する手法が必要。Webプラットフォーム全体では、contain プロパティの仕様見直しが議論されており、将来のブラウザアップデートで contain: paint と3Dコンテキストの共存が可能になる可能性がある。

開発者は現時点でクロスブラウザ対応を求めるなら、3D View Transitionを段階的機能として扱い、非対応ブラウザにはフォールバックアニメーションを準備するのが現実的。

参照

• Why Isn’t My 3D View Transition Working? – CSS-Tricks
• New to the web platform in May – web.dev
• April 2026 Baseline monthly digest – web.dev