CSS view transition API, web sayfaları arasında geçişleri animasyonlu hale getirmek için harika bir araç. Ancak, 3D dönüşümler (örneğin, bir sayfanın 3 boyutlu olarak dönmesi) beklenen sonucu vermiyor. Birçok geliştirici, iki sayfa arasında 3D bir flip yapmak istediğinde, tarayıcının önce düzleştirme yapması nedeniyle animasyonun çalışmadığını fark ediyor. Bu yazıda, sorunun kaynağını ve basit çözümünü adım adım inceleyeceğiz.
Sorunu görselleştirmek için en iyi örnek, görüntü elemanlarıdır. Görüntüler, değiştirilmiş öğeler (replaced elements) olduğu için, view transition anlık görüntüleriyle benzerlik gösterir. Bir resmin tıklamayla dönüp diğerini göstermesi gibi bir 3D animasyon, CSS'te perspective özelliği olmadan düz bir görünüm verir. Örneğin, bir kartın dönmesi için .scene adlı bir kapsayıcıya perspective: 1200px; eklemek gerekir; aksi halde dönüş sadece 2 boyutlu kalır.
View transition'da ise durum farklıdır. Cross-document view transition için @view-transition { navigation: auto; } ile geçişi etkinleştirdiğinizde, varsayılan olarak sayfalar arası yumuşak bir geçiş (fade) olur. Özelleştirmek için ::view-transition-old(root) ve ::view-transition-new(root) pseudo-elementlerine animasyon ekleyebilirsiniz. Ancak, buraya perspective özelliğini eklemek işe yaramaz. Çünkü view transition anlık görüntüleri, gerçek DOM ağacında değil, ayrı bir katmanda oluşturulur.
Perspective özelliği, HTML veya :root gibi üst öğelere eklendiğinde bile çalışmaz. Bunun nedeni, view transition anlık görüntülerinin bu üst öğelerin altında olmamasıdır. Tarayıcı, anlık görüntüleri ayrı bir şekilde işler ve 3D dönüşümü uygulamak için doğru perspektif bağlamını sağlamaz. Bramus'un da belirttiği gibi, perspective (ve 3D dönüşümler) bu bağlamda alışılmadık bir etki yaratır.
Önemli Gelişmeler
Çözüm ise oldukça basit: perspective özelliği yerine perspective() fonksiyonunu kullanmak. Bu fonksiyonu doğrudan @keyframes animasyonu içinde, transform özelliğine ekleyebilirsiniz. Örneğin, flip-out animasyonu için: @keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); } 100% { transform: perspective(1100px) rotateY(-90deg); } } Bu şekilde, her animasyon adımında perspektif etkisi uygulanır ve 3D dönüşüm çalışır.
Nasıl Önlem Alınmalı?
Bu yöntem, view transition pseudo-elementlerinde değil, doğrudan animasyon keyframe'lerinde kullanılır. ::view-transition-old(root) ve ::view-transition-new(root) için ayrı ayrı perspective() fonksiyonu eklemenize gerek yok; animasyonu tanımlarken eklemeniz yeterlidir. Bu küçük değişiklik, 3D flip gibi etkileyici geçişlerin çalışmasını sağlar. Unutmayın, CSS'te bazen en basit çözümler en etkilidir. Şimdi, projelerinizde bu tekniği deneyerek görsel olarak çarpıcı sayfa geçişleri oluşturabilirsiniz.
Kaynak: css-tricks.com
