CSS TranslateZ() işlevi, bir öğeye derinlik katarak onu uzayda yakına veya uzağa çeker. Başka bir deyişle, bir öğeyi 3 boyutlu bir alanda Z ekseni boyunca kaydırır.
.box:hover { transform:translateZ(100px); } .box.perspective:hover { transform: perspektif(500 piksel) çeviriZ(100 piksel); }
TranslateZ()'nin çalışması için perspektif() işlevi veya perspektif özelliği gereklidir. İkisi de olmadan hiçbir etki olmaz.
Aşağıdaki demoda anahtarı etkinleştirin ve daha yakından görmek için kutunun üzerine gelin:
CodePen Yerleştirme Geri Dönüşü
Teknik Analiz
Fareyle üzerine gelindiğinde .box öğesi büyüyor gibi görünse de, olan bu değil. Fareyi kutunun üzerine getirdiğinizde aslında size 100 piksel kadar yaklaşarak daha büyük görünmesini sağlar. Birazdan buna daha fazla değineceğiz, böylece orada olup bitenler daha belirgin olur.
TranslateZ(), Scale() işlevinin veya Scale özelliğinin bir alternatifiyle karıştırılmamalıdır. Perspektif ve ölçek iki farklı kavramdır.
Önemli Gelişmeler
TranslateZ() işlevi, CSS Dönüştürme Modülü Düzey 2 spesifikasyonunda tanımlanmıştır.
tercümeZ() = tercümeZ(
TranslateZ() işlevi, öğenin ekranın önünden ne kadar uzakta olduğunu tanımlayan tek bir
Sonuç ve Değerlendirme
/* Pozitif uzunluklar */ transform: TranslateZ(100px); dönüşüm: TranslateZ(5rem); /* Negatif uzunluklar */ transform: TranslateZ(-50px); dönüşüm: TranslateZ(-8em);
Nasıl Önlem Alınmalı?
TranslateZ() işlevi tek bir argüman alır:
Uzmanların Görüşleri
TranslateZ() işlevi yanıltıcıdır çünkü bir öğeyi Z ekseni boyunca hareket ettirir ve bu, tarayıcıda varsayılan olarak görsel olarak algılanamaz. Tarayıcılar öğeleri derinliklerine göre değil, yalnızca yükseklik ve genişliklerine göre oluşturduklarından, TranslateZ() işlevi hiçbir şey yapmıyormuş gibi görünebilir.
Derinliğini ve projeksiyonunu göstermek için perspektif özelliğini veya perspektif() fonksiyonunu kullanmamız gerekir. Ek olarak, dönüşüm stilini üst öğesindeki 3d değerini koruyacak şekilde ayarlayabiliriz; bu, CSS'nin alt öğelerin 3B olarak konumlandırılması gerektiğini bilmesini sağlar.
Sistem Güvenliği
Projeksiyon ve perspektif
Bir web sitesinde, öğeler 2 boyutlu ekranda düzleştirildiği için derinlik (yani "yakınlık" veya "ilerilik") duygusu yoktur. İster Translate(200px) ister Translate(20px) olsun, öğeyi aynı mesafede algılarız, dolayısıyla açıkça etkinleştirmediğimiz sürece hiçbir perspektif yoktur. Bunu göstermek için örneğin aşağıdaki HTML'yi alın:
İlk olarak, sahnenin tamamında bazı perspektifleri etkinleştireceğiz:
Detaylar ve Etkileri
.scene { perspektif: 800 piksel; }
Ardından, dönüşüm stilini ebeveynde 3d'yi koruyacak şekilde ayarlayacağız, böylece çocuklar da 3D olarak dönüştürülecek:
Gelecekte Ne Bekleniyor?
.parent { dönüşüm stili: koru-3d; }
Şimdi .box'ı çeviriZ() kullanarak kullanıcıya 100 piksel yaklaştırıyoruz.
.box { transform: TranslateZ(100 piksel); }
CodePen Yerleştirme Geri Dönüşü
Kutunun boyutu 100 piksel büyümüş gibi görünse de, ebeveyni yana çevirdiğinizde .box boyutunun artmadığını ancak .parent ile .box arasındaki mesafenin arttığını göreceksiniz.
perspektif vs. perspektif()
Her ikisi de aynı işi yapar: elemanın projeksiyonunu tanımlar. Perspektif özelliği tüm 3B öğeler için üst öğeye uygulanırken, perspektif() işlevi yalnızca tek bir 3B öğeye uygulanabilir ve 3B dönüştürme işlevinden önce bildirilmesi gerekir.
.parent { perspektif: 800 piksel; } .child-1 { transform: TranslateZ(200px); /* 800px'lik bir projeksiyon içerisinde tanımlandı */ } .child-2 { transform:translate3D(100px, 200px, 150px); /* 800 piksellik bir projeksiyon dahilinde tanımlandı */ }
.element { transform: TranslateZ(100px) perspektif(800px); /* Hayır ❌ */ } .element { transform: perspektif(800 piksel) çeviriZ(100 piksel); /* Evet ✅ */ }
Web performansını optimize etmek için de kullanılabilir
Web sitemizin performansını artırmak için TranslateZ() işlevini kullanabileceğinizi biliyor muydunuz? CSS 3D dönüştürme işlevleri, öğe oluşturma için CPU'dan daha hızlı ve daha üstün olan GPU'yu kullanır. Bu performans hilesi, animasyonlar sırasında titremeyi önler ve geçişleri daha yumuşak hale getirir.
Geliştiriciler, işlemeyi CPU'dan GPU'ya geçirmek için TranslateZ(0)'ı ekleyerek performansı artırır. Sorunlu bir animasyonla uğraşıyorsanız artık bunu düzeltmenin bir yolu var! Demo
CodePen Yerleştirme Geri Dönüşü
TranslateZ() işlevi, CSS Dönüştürme Modülü Düzey 2 spesifikasyonunda tanımlanmıştır.
TranslateZ() işlevi tüm modern tarayıcılarda mevcuttur.
CSS TranslateZ ve Perspektif() Kullanımına İlişkin Püf Noktaları Yazan: William Le
3D dönüşümler hakkında daha fazlası!
