CSS'de translateZ() fonksiyonu, bir öğeyi üç boyutlu uzayda Z ekseni boyunca hareket ettirerek ona derinlik kazandırır. Bu sayede öğe ekrana yaklaşır veya uzaklaşır gibi görünür. Ancak bu fonksiyonun çalışabilmesi için mutlaka perspective() fonksiyonu veya perspective özelliği kullanılmalıdır. Aksi halde herhangi bir görsel değişiklik olmaz. translateZ(), scale() fonksiyonu ile karıştırılmamalıdır; ölçeklendirme ile derinlik farklı kavramlardır.
translateZ() 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); ifadesi öğeyi 100 piksel yakınlaştırır. Bu işlem, tarayıcıda varsayılan olarak derinlik algısı olmadığından, perspective olmadan etkisizdir. Perspective, sahneye bir projeksiyon düzlemi ekleyerek Z eksenindeki hareketin görselleşmesini sağlar.
perspective özelliği ile perspective() fonksiyonu arasında kullanım farkı vardır. perspective özelliği bir kapsayıcıya uygulanarak tüm alt öğeleri etkilerken, perspective() fonksiyonu yalnızca tek bir öğeye uygulanır ve diğer 3D dönüşüm fonksiyonlarından önce tanımlanmalıdır. Örneğin, transform: perspective(800px) translateZ(100px); doğru kullanımdır. Ayrıca, translateZ(0) kullanarak GPU hızlandırması elde edilebilir; bu yöntem animasyonlardaki takılmaları önler ve daha akıcı bir deneyim sunar.
Teknik Analiz
translateZ() fonksiyonu, CSS Transform Module Level 2 spesifikasyonunda tanımlanmıştır ve tüm modern tarayıcılarda desteklenmektedir. Doğru kullanıldığında, web sayfalarına derinlik katmak ve performansı artırmak için güçlü bir araçtır. 3D dönüşümlerle ilgili daha fazla bilgi için CSS 3D Transforms kaynaklarına başvurabilirsiniz.
