CSS view transition'lar ile sayfalar arası geçişlerde 3D efektler uygulamak istediğinizde, beklenmedik bir sorunla karşılaşabilirsiniz. Normalde bir kartı çevirmek için kullandığınız rotateY dönüşümü, perspective özelliği ile harika çalışırken, aynı tekniği cross-document view transition'lara uyguladığınızda hiçbir etki göremezsiniz. Bunun nedeni, view transition'ların oluşturduğu snapshot'ların, 3D dönüşümler için gerekli olan perspektif bağlamını kaybetmesidir.
Sorunun kaynağı, perspective CSS özelliğinin yalnızca alt öğelere uygulanmasıdır. View transition yapısında, ::view-transition pseudo-element'i, snapshot'ları içeren bir katman oluşturur. Ancak html veya :root üzerinde perspective tanımlamak, bu katmana etki etmez çünkü perspective, kendisine değil çocuklarına uygulanır. Bu nedenle, ::view-transition-old(root) ve ::view-transition-new(root) pseudo-element'leri perspektiften yoksun kalır ve 3D dönüşüm düz görünür.
Çözüm ise oldukça basit: perspective özelliği yerine perspective() fonksiyonunu kullanmak. Bu fonksiyonu doğrudan @keyframes animasyonu içinde transform özelliğine ekleyerek, 3D efektin view transition snapshot'larına uygulanmasını sağlayabilirsiniz. Örneğin: @keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); } 100% { transform: perspective(1100px) rotateY(-90deg); } }. Bu sayede, perspektif her bir snapshot'a doğrudan uygulanır ve 3D dönüşüm çalışır hale gelir.
Unutulmaması gereken bir diğer nokta, perspective() fonksiyonunun her anahtar karede belirtilmesi gerektiğidir. Aksi takdirde, dönüşümün başlangıç veya bitiş noktasında perspektif kaybolabilir. Ayrıca, transform-origin özelliğini doğru ayarlamak da önemlidir. Bu yöntemle, kart çevirme, küp döndürme gibi etkileyici 3D geçişleri, sayfalar arasında sorunsuzca kullanabilirsiniz.
