Web sayfaları arasında 3D geçişler (cross-document view transitions) yapmak istediğinizde, tarayıcıların öncelikle görüntüleri düzleştirdiğini fark etmiş olabilirsiniz. Bu durum, özellikle resim elemanları gibi değiştirilmiş öğelerde belirgindir. Oysa aynı 3D animasyonu, örneğin bir kartı çevirme efekti, normal CSS ile sorunsuz çalışır. Peki neden view transition'larda aynı etkiyi alamıyoruz?
Sorunun kaynağı, perspective özelliğinin nereye uygulanacağı ile ilgili. Normal bir 3D dönüşümde, perspective'i ana kapsayıcıya (parent) veririz. Örneğin bir kart çevirme animasyonunda .scene elementine perspective: 1200px; veririz. Ancak view transition'larda, sayfanın tamamının anlık görüntüsü alındığı için, perspective'i html veya :root'a vermek işe yaramaz. Görünüşe göre bu özellik, view transition pseudo-elementleri tarafından düzgün şekilde devralınmaz.
Neyse ki çözüm oldukça basit: perspective özelliği yerine perspective() fonksiyonunu kullanmalısınız. Ve bunu, tahmin edebileceğiniz gibi ::view-transition-* pseudo-elementlerinde değil, doğrudan @keyframes animasyonunun içinde uygulamanız gerekiyor. Örneğin, eski sayfanın dönüşü için @keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); } 100% { transform: perspective(1100px) rotateY(-90deg); } } şeklinde yazabilirsiniz. Böylece 3D etki korunur ve geçiş istediğiniz gibi çalışır.
Nasıl Önlem Alınmalı?
Bu yöntemle, sayfalar arası geçişlerde etkileyici 3D efektler elde edebilirsiniz. Unutmayın, perspective() fonksiyonunu animasyonun her adımında belirtmeniz gerekir, aksi halde tarayıcı 3D'yi düzleştirir. Artık view transition'larınızı sadece düz geçişlerle sınırlamak zorunda değilsiniz.
