Web sayfaları arasında akıcı geçişler oluşturmak için CSS view transition API'si oldukça kullanışlıdır. Ancak 3D dönüşümler (örneğin sayfa çevirme efekti) eklemeye kalktığınızda, beklenmedik bir sorunla karşılaşabilirsiniz: 3D geçişler çalışmaz, sayfalar düz bir şekilde döner. Sorun, perspective özelliğinin view transition anlık görüntüleri üzerinde etkili olmamasından kaynaklanır. Bu yazıda sorunun kaynağını ve basit çözümünü adım adım inceleyeceğiz.
Öncelikle, 3D bir dönüşümün nasıl çalıştığını hatırlayalım. Bir karta 3D çevirme efekti vermek için, kartın üst öğesine (parent) perspective özelliği eklenir. Örneğin, .scene sınıfına perspective: 1200px; verildiğinde, alt öğe olan .card üzerinde rotateY dönüşümü üç boyutlu olarak algılanır. Bu yapı olmadan, dönüşüm düz bir eğimden ibaret kalır. View transition API'si de benzer bir mekanizmayla çalışır: tarayıcı, sayfanın önceki ve sonraki halinin anlık görüntülerini alır ve bunları ::view-transition-old() ve ::view-transition-new() pseudo elemanlarına yerleştirir. Ancak bu elemanların ebeveyni nedir? HTML yapısına baktığımızda, view transition elemanları doğrudan altında değil, ::view-transition adlı bir pseudo kök altında bulunur. Dolayısıyla, html veya :root üzerine perspective eklemek işe yaramaz, çünkü perspective yalnızca alt öğelere uygulanır, kendine değil. View transition elemanları ise bu kapsamın dışında kalır.
Deneyelim: ::view-transition-old(root) ve ::view-transition-new(root) için 3D dönüşüm animasyonları tanımladığınızda, ancak perspektif ayarlamadığınızda, dönüşüm düz kalır. Örneğin, rotateY(-90deg) animasyonu sayfayı döndürürken derinlik hissi olmaz. perspective özelliğini html veya :root'a eklemek de sonucu değiştirmez. Peki çözüm nedir? Bramus'un da belirttiği gibi, perspective özelliği view transition pseudo elemanları üzerinde çalışmaz. Bunun yerine, perspective() fonksiyonunu doğrudan @keyframes içinde kullanmalısınız. Yani, transform: perspective(1100px) rotateY(-90deg); şeklinde tanımlayarak, perspektifi animasyonun kendisine entegre edersiniz. Bu sayede view transition anlık görüntüleri 3D dönüşümü doğru şekilde uygular.
Pratik bir örnek: Aşağıdaki gibi bir animasyon tanımı, sayfalar arası 3D çevirme efekti verecektir. Önceki sayfa dışarı doğru dönerken, yeni sayfa içeri doğru döner. perspective() fonksiyonunun animasyonun başında veya sonunda olması fark etmez; önemli olan dönüşümle birlikte tanımlanmasıdır. Bu yöntem, perspective özelliğinin ebeveyn-çocuk ilişkisine ihtiyaç duymasını ortadan kaldırır ve doğrudan dönüşüm matrisine dahil edilir.
Gelecekte Ne Bekleniyor?
Kod örneği: @keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(1100px) rotateY(-90deg); opacity: 0; } } ::view-transition-old(root) { animation: flip-out 0.3s forwards; } Bu şekilde, sayfa geçişi sırasında 3D dönüşüm beklendiği gibi çalışacaktır. Unutmayın, transform-origin değerini de center center olarak ayarlamak, dönüşümün merkezden yapılmasını sağlar.
Detaylar ve Etkileri
Sonuç olarak, CSS view transition ile 3D efektler kullanırken perspective özelliği yerine perspective() fonksiyonunu tercih edin. Bu küçük fark, büyük bir etki yaratır. Deneyerek görebilirsiniz: sayfalar arası geçişlerde derinlik hissi kazanmak için bu yöntemi kullanın. Ayrıca, diğer 3D dönüşümlerde de aynı yaklaşımı benimseyebilirsiniz. Sorun giderme sürecinizde bu bilgi size zaman kazandıracaktır.
Kaynak: css-tricks.com
