Web geliştiricilerin sıkça karşılaştığı bir sorun: sayfalar arası 3D görünüm geçişleri (cross-document view transitions) beklenildiği gibi çalışmıyor. Tarayıcılar, geçiş anında sayfanın öncesi ve sonrasına ait anlık görüntüleri alırken 3D dönüşümleri düzleştiriyor. Bu durum, özellikle imgeler gibi değiştirilebilir öğelerle yapılan denemelerde net şekilde görülüyor. Oysa aynı öğeleri sayfa içinde döndürmek sorunsuz çalışırken, görünüm geçişlerinde neden aynı performansı alamıyoruz?
Sorunun temelinde perspective özelliğinin yanlış yere uygulanması yatıyor. Normalde bir öğeye 3D efekt vermek için parent elemente perspective tanımlarız. Örneğin, bir kartı döndürmek için .scene kabına perspective: 1200px veririz. Ancak görünüm geçişlerinde, anlık görüntüler ::view-transition pseudo-elementleri içinde yer alır. Bu yapıda perspective'i html, :root veya body gibi üst öğelere eklemek işe yaramaz. Çünkü tarayıcı, bu özelliği doğru şekilde aktarmaz.
Çözüm ise beklenmedik derecede basit: perspective özelliği yerine perspective() fonksiyonunu kullanmak. Bu fonksiyonu doğrudan @keyframes animasyonlarının içine ekleyerek 3D dönüşümü gerçekleştirebiliriz. Örneğin, flip-out animasyonunda transform: perspective(1100px) rotateY(-90deg) yazmak yeterli. Bu sayede tarayıcı, 3D perspektifi doğru şekilde hesaplar ve sayfa geçişi sırasında etkileyici bir dönüş efekti elde edilir.
Uzmanların Görüşleri
Unutulmaması gereken bir diğer nokta: perspective() fonksiyonunu her anahtar karede tekrar tanımlamak gerekiyor. Aksi halde animasyonun başında veya sonunda perspektif kaybolabiliyor. Bu küçük dokunuşla, daha önce başarısız olan 3D geçişleriniz sorunsuz çalışacaktır. Artık sayfalar arası geçişlerde de etkileyici 3D efektler kullanabilirsiniz.
