CSS view transition API, web sayfaları arasında akıcı geçişler yapmamızı sağlayan güçlü bir özellik. Ancak birçok geliştiricinin karşılaştığı bir sorun var: 3D dönüşümler (örneğin 3D flip) sayfalar arası geçişlerde çalışmıyor. Bu yazıda sorunun nedenini ve basit çözümünü adım adım inceleyeceğiz.
3D dönüşümlerin çalışması için genellikle perspective özelliğini ana kaba (parent) ekleriz. Örneğin bir kartı döndürmek için .scene container'ına perspective: 1200px; veririz, ardından .card elementine rotateY dönüşümü uygularız. Bu sayede kart 3D olarak döner. Ancak view transition ile sayfalar arası geçişte aynı mantık işlemez.
Sorunun kaynağı, view transition'ın sayfanın tamamının anlık görüntüsünü (snapshot) alması ve bu görüntüleri ::view-transition-old(root) ve ::view-transition-new(root) gibi pseudo-elementlerde saklaması. Bu elementlerin DOM hiyerarşisinde veya :root'un altında olmadığını fark ediyoruz. Aslında view transition pseudo-elementleri, document'in üzerinde ayrı bir katmanda yer alıyor. Bu nedenle html veya :root üzerinde perspective tanımlamak işe yaramıyor.
Deneyelim: ::view-transition-old(root) ve ::view-transition-new(root) için 3D flip animasyonu yazdığımızda, dönüşüm düz (flat) kalıyor. Çünkü perspektif uygulanacak bir üst element yok. perspective özelliği sadece çocuk elementlere etki eder, kendine değil. Oysa view transition pseudo-elementleri kendileri dönüşüm yapıyor, bir üst container yok.
Önemli Gelişmeler
Çözüm aslında çok basit: perspective özelliği yerine CSS transform fonksiyonu olan perspective() kullanmak. perspective() fonksiyonu, transform özelliği içinde kullanıldığında, dönüşümü yapan elementin kendisine perspektif uygular. Yani şöyle: ::view-transition-old(root) { transform: perspective(1200px) rotateY(-90deg); } şeklinde yazarsak, perspektif doğrudan snapshot elementine uygulanır ve 3D dönüşüm çalışır.
Uzmanların Görüşleri
Özetle, view transition ile 3D animasyon yaparken şu kurallara dikkat edin: 1) perspective özelliği yerine perspective() fonksiyonunu kullanın. 2) Animasyonu @keyframes içinde transform: perspective(...) rotateY(...) şeklinde tanımlayın. 3) transform-origin ayarını unutmayın. Bu basit değişiklikle sayfalar arası 3D flip gibi etkileyici geçişler elde edebilirsiniz.
Kaynak: css-tricks.com
