çevir()

CSS Translate() işlevi, bir öğeyi iki boyutlu bir düzlemdeki varsayılan konumundan kaydırır. Bu şekilde bir öğeyi yatay, dikey veya her iki şekilde yeniden konumlandırabiliriz.

.parent:hover .box { transform: tercüme et(50 piksel, %50); }

Genişliğinin %50'si sola doğru hareket ettiğini görmek için kutunun üzerine gelin:

Sonuç ve Değerlendirme

CodePen Yerleştirme Geri Dönüşü

Önemli Gelişmeler

Diğer transform fonksiyonlarıyla birlikte transform özelliğinin içinde kullanılır.

Sistem Güvenliği

Translate() işlevi, CSS Dönüşümleri Modülü Düzey 1 taslağında tanımlanmıştır.

Translate() fonksiyonunun sözdizimi şuna benzer:

Teknik Analiz

= Translate( , ? )

…bu sadece bir veya iki uzunluk veya yüzde oranında hareket edebileceğimizi (çevirebileceğimizi) ve öğeleri kullanabileceğimizi söylemenin süslü bir yolu. Birazdan bazı örneklere gireceğiz. Ama önce:

Detaylar ve Etkileri

/* Tek argüman */translate(100px) /* 100px sağa hareket eder */translate(-100%) /* elemanın genişliğinin %100'ünü sola taşır */ /* Çift argüman */translate(50px, 100px) /* 50px aşağı, sonra 100px sağa hareket eder */translate(50%, 100%) /* elemanın genişliğinin %50'sini aşağı doğru hareket ettirir, sonra yüksekliğinin %100'ü sağa doğru */

Translate() işlevi iki argümanı alır ( tx , ty , "yatay olarak çevir" ve "dikey olarak çevir") gibi. Bunlar tarayıcıya öğeyi ne kadar ve hangi yönde (olumlu ya da olumsuz) hareket ettireceğini söyler.

Gelecekte Ne Bekleniyor?

tx : Yatay eksendeki yer değiştirmeyi belirtir. Pozitifse eleman sağa gider. Negatifse öğe sola kayar.

: Yatay eksendeki yer değiştirmeyi belirtir. Pozitifse eleman sağa gider. Negatifse öğe sola kayar. ty (isteğe bağlı): Dikey eksendeki yer değiştirmeyi belirtir. Pozitifse element aşağıya doğru hareket eder, negatifse element yukarıya doğru hareket eder.

Uzmanların Görüşleri

Yalnızca bir bağımsız değişken iletilirse bunun tx olduğu varsayılır. Alternatif olarak, her iki argüman da iletildiğinde ikinci argüman ty olacaktır. Birlikte elemanı çapraz olarak kaydırırlar.

Ayrıca veya değerlerini kullanabileceğimizi de fark edeceksiniz. değeri mutlaktır, değeri ise öğenin genişliğine (tx için) veya yüksekliğine (ty için) bağlıdır.

CSS'de bir öğeyi ortalamanın birçok yolu olmasına rağmen, geçmişinin çoğunda mutlak bir öğeyi ortalamak için en iyi şansımız, Translate() işlevini kullanmaktı.

Süreç şu şekilde ilerler: Mutlak bir öğe verildiğinde, genellikle üst: %50 ve sol: %50'yi kullanarak onu merkeze kaydırırız. Ancak bunlar tek başına öğenin kendisini değil, yalnızca öğenin sol üst köşesini merkeze sabitler. Bunu düzeltmek için, öğeyi kendi genişliğinin ve yüksekliğinin yarısı kadar geriye kaydırmak için transform:translate(-%50, -%50) komutunu kullanırız.

.modal-center { konum: mutlak; üst: %50; sol: %50; dönüştürme: tercüme et(-%50, -%50) ölçek(0,9); }

Daha yakın zamanlarda bunu bilinen justify-self ve align-self özelliklerini kullanarak yapabiliriz. Alternatif olarak, varsayılan olarak ortalanan anlamsal diyalog kipini de kullanabilirdik.

Nasıl Önlem Alınmalı?

CodePen Yerleştirme Geri Dönüşü

TranslateX() işlevi öğeleri yatay olarak hareket ettirirken, TranslateY() işlevi dikey ekseni işler. Bunun yerine çapraz hareket istiyorsak her ikisini de birleştirebilir veya daha kısa olan Translate() işlevini kullanabiliriz.

Yaygın bir kullanım durumu, bir öğeyi herhangi bir köşeden sayfaya çevirmek olabilir. Örneğin, bir Toast bileşenimiz olsaydı ve onun sağ alttan içeri kaymasını isteseydik, öğeyi alt ve sağ özellikler arasında hareket ettirebilir, ardından da Translate() ile bunları sayfanın dışına kaydırabilirdik.

.toast { konum: sabit; alt: 30 piksel; sağ: 30 piksel; dönüştürme: tercüme et(40 piksel, 40 piksel); geçiş: 0,28 saniyelik dönüşüm kolaylığı; }

Daha sonra, bir .show sınıfı tetiklendiğinde, Translate() değerleri sıfırlanır ve çapraz olarak kaymalarına neden olur:

.toast.show { opaklık: 1; dönüştürme: tercüme et(0, 0); }

CodePen Yerleştirme Geri Dönüşü

Diğer unsurları etkilemez

Translate() işlevi, diğer dönüştürme işlevleri gibi belge akışını etkilemez. Bunun yerine, çevresindeki veya yeni konumdaki öğeleri itmeden, çevrilen öğeyi görsel olarak yeni bir konuma taşır. Ayrıca, öğenin başlangıçta kapladığı alan, sanki hiç taşınmamış gibi düzende ayrılmış olarak kalır.

/* Çevrilmiş öğe */ .translated { konum: mutlak; üst: 0; sol: 0; dönüştürme: tercüme et(80 piksel, 40 piksel); }

"Çevrilen" öğenin, hareket ettirildiğinde yanındaki Kutu 1 veya Kutu 2 öğelerinin kaymasına neden olmadığına dikkat edin.

CodePe n Geri Dönüşü Göm

Yeniden akışları tetikleyebilen veya komşu öğeleri kaydırabilen marjın aksine, Translate() yalnızca öğenin görsel olarak oluşturulduğu yeri değiştirir.

İşaretçi sözde sınıflarıyla ilgili sorunlar

Translate() işlevini doğrudan bir işaretçi üzerinde kullanmak :hover gibi sözde sınıflar bazen kötü etkileşimlere neden olabilir. Öğenin imleçten yeterince uzağa çevrildiği bir durumda, :hover durumu sona erer ve öğenin hemen orijinal konumuna geri dönmesine neden olur. İmlecin hala orada kaldığı, dolayısıyla tekrar çevrildiği ve sürekli titreşen bir döngüye neden olduğu konum.

Bunun basit bir çözümü, çevrilecek öğeyi bir ana kaba yerleştirmek ve ana öğe çeviri işlevini alırken sözde sınıfı ( :hover ) ebeveyne uygulamaktır.

/* Sorun durumu */ .bad:hover { transform:translateX(160px); } /* Çözüm */ .parent:hover .good { transform:translateX(160px); }

CodePen Yerleştirme Geri Dönüşü

CodePen Yerleştirme Geri Dönüşü

CSS Translate() işlevi, şu anda Editörün Taslaklarında bulunan CSS Dönüşümleri Modülü Düzey 1'de tanımlanmıştır.

Translate() işlevi tüm modern tarayıcılarda temel desteğe sahiptir.