View transition API'si ile sayfalar arası geçişlerde 3D efektler elde etmek istediğinizde, genellikle beklenen sonucu alamazsınız. Bunun nedeni, tarayıcıların view transition anlık görüntülerini düzleştirmesidir. Örneğin, bir resmi tıklayarak çevirme animasyonu yapmak istediğinizde, CSS'de perspective özelliğini ana kaba (parent container) eklemeniz gerekir. Aksi takdirde 3D dönüşüm düz kalır ve animasyon etkileyici olmaz. Ancak view transition'lar söz konusu olduğunda, perspective özelliğini html veya :root gibi üst öğelere eklemek işe yaramaz.
View transition'lar çalışırken tarayıcı, sayfanın anlık görüntülerini alır ve ::view-transition-old() ile ::view-transition-new() sözde sınıflarına uygular. Bu sözde sınıflara 3D dönüşümler eklediğinizde, perspective özelliğini doğrudan html veya body gibi üst öğelere eklemek hiçbir işe yaramaz. Çünkü view transition anlık görüntüleri, sayfanın normal DOM hiyerarşisinin dışında, ayrı bir katmanda oluşturulur. Bu nedenle, perspective özelliği üst öğelerden kalıtım yoluyla bu anlık görüntülere ulaşmaz.
Çözüm aslında çok basit: perspective özelliğini kullanmak yerine, CSS perspective() fonksiyonunu kullanmalısınız. Bu fonksiyonu doğrudan @keyframes içindeki transform özelliğine ekleyerek, view transition anlık görüntülerine 3D perspektif kazandırabilirsiniz. Örneğin, @keyframes flip-out { from { transform: perspective(1200px) rotateY(0deg); } to { transform: perspective(1200px) rotateY(-90deg); } } şeklinde bir tanım yaparak, sayfalar arası geçişte 3D dönüşümü elde edebilirsiniz.
Bu yöntem, view transition'ların çalışma mantığına uygun olduğu için sorunsuz çalışır. perspective() fonksiyonu, dönüşüm matrisine doğrudan perspektif ekler ve bu sayede anlık görüntüler üzerinde 3D efekt uygulanabilir. Artık sayfalar arası geçişlerde etkileyici 3D dönüşümler yapmak mümkün. Unutmayın, perspective özelliği değil, perspective() fonksiyonu kullanmalısınız.
