CSS translateZ() fonksiyonu, bir HTML öğesini Z ekseni boyunca hareket ettirerek ona üçüncü bir boyut kazandırır. Bu fonksiyon sayesinde öğeyi kullanıcıya yaklaştırabilir veya uzaklaştırabilirsiniz. Ancak, translateZ()’nin etkisini görebilmek için mutlaka bir perspektif tanımlaması yapmanız gerekir. Aksi takdirde, tarayıcı öğeyi düz 2D ekranda gösterdiğinden herhangi bir derinlik farkı algılanmaz. Bu nedenle, perspective() fonksiyonu veya perspective CSS özelliği kullanılarak üç boyutlu bir sahne oluşturulmalıdır.
translateZ() fonksiyonu tek bir parametre alır:. Pozitif değerler öğeyi kullanıcıya yaklaştırırken, negatif değerler uzaklaştırır. Örneğin, transform: translateZ(100px) kodu, öğeyi 100 piksel yakına getirir. İlk bakışta öğe büyümüş gibi görünse de aslında boyutu değişmez; sadece perspektif etkisiyle daha büyük algılanır. Bu, scale() fonksiyonundan farklıdır; scale() gerçek boyutu değiştirirken, translateZ() derinlik hissi yaratır.
perspective özelliği ve perspective() fonksiyonu arasında küçük bir fark vardır. perspective özelliği, bir kapsayıcı öğeye uygulanarak tüm alt öğelerin aynı perspektif projeksiyonunda görünmesini sağlar. Öte yandan, perspective() fonksiyonu yalnızca tek bir öğeye uygulanabilir ve 3D dönüşüm fonksiyonundan önce tanımlanmalıdır. Örneğin, transform: perspective(800px) translateZ(100px) doğru kullanımdır. Ayrıca, alt öğelerin 3D uzayda konumlanmasını sağlamak için üst öğeye transform-style: preserve-3d özelliği eklenmelidir.
Gelecekte Ne Bekleniyor?
translateZ() fonksiyonunun ilginç bir yanı, web performansını artırmak için kullanılabilmesidir. translateZ(0) gibi bir değer, tarayıcıyı öğeyi CPU yerine GPU ile işlemeye zorlayarak animasyonlardaki takılmaları azaltır ve geçişleri daha akıcı hale getirir. Tüm modern tarayıcılarda desteklenen bu fonksiyon, CSS Transform Module Level 2 spesifikasyonunda tanımlanmıştır. 3D dönüşümlerle ilgili daha fazla bilgi edinmek için diğer rehberlerimize göz atabilirsiniz.
