tercümeX()

CSS TranslateX() işlevi, bir öğeyi belirtilen miktarda yatay olarak kaydırır. Spesifik olarak, değerin pozitif veya negatif olmasına bağlı olarak bir öğeyi sağa veya sola kaydırır.

.parent:hover .box { transform:translateX(50%); }

CodePen Yerleştirme Geri Dönüşü

Uzmanların Görüşleri

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

CSS Dönüşümleri Modülü Düzey 1 taslağında tanımlanmıştır.

TranslateX() işlevi aşağıdaki gibi basit bir sözdizimine sahiptir:

= TranslateX( )

Sistem Güvenliği

Veya sade bir İngilizceyle: Bu öğeyi yatay olarak bu kadar çevirin (veya taşıyın).

/* */translateY(80px) /* Eleman 80px aşağıya doğru hareket eder */translateY(-24ch) /* Eleman 24ch yukarıya hareket eder */ /* */translateY(50%) /* Eleman, elemanın yüksekliğinin %50'sini aşağıya doğru hareket ettirir */translateY(-100%) /* Eleman, elemanın yüksekliğinin %100'ünü yukarıya hareket ettirir */

Teknik Analiz

TranslateX() işlevi, öğenin ne kadar uzağa ve hangi yönde hareket ettirileceğini belirten tek bir bağımsız değişkenini alır; bu, sol (negatif) veya sağ (pozitif) olabilir.

İletilen argüman bir veya bir olabilir:

: Pozitif olduğunda, örneğin 50px, öğe 50 piksel sağa doğru hareket eder. Öte yandan -40ch durumunda eleman 40 karakter sola doğru hareket eder.

Pozitif olduğunda, örneğin öğe 50 piksel sağa doğru hareket eder. Öte yandan, durumunda öğe 40 karakter sola doğru hareket eder. : Yüzdeler öğenin genişliğine göredir. Yani, 400 piksel genişliğindeki bir öğe için, TranslateX(50%) onu 200 piksel sağa taşırken, TranslateX(-50%) 200 piksel sola taşır.

Nasıl Önlem Alınmalı?

Öğelerin web sayfasında birçok şekilde kaymasını sağlamak için TranslateX() işlevini kullanabiliriz. Örneğin, bir menü düğmesine tıklandığında soldan (veya sağdan) kayan bir kenar çubuğu. Bunu başarmak için başlangıçta kenar çubuğunu tamamen sayfanın dışına kaydırıyoruz:

.sidebar { transform: TranslateX(-100%); geçiş: 0,2 saniyelik geçiş kolaylığı dönüşümü; }

Önemli Gelişmeler

Daha sonra, biraz JavaScript kullanarak, kullanıcı menü düğmelerini tıkladığında .open sınıfını değiştirebiliriz. Bu, kenar çubuğunu soldan sayfaya geri taşır:

.sidebar.open { transform:translateX(0); }

Detaylar ve Etkileri

CodePen Yerleştirme Geri Dönüşü

Örnek: Sonsuz çerçeve

Sonuç ve Değerlendirme

Web geliştirmedeki kayan yazılar, otomatik olarak kayan bilgi banner bileşenleridir. Çoğu web sitesinde, şirket logolarını, belki de sponsorları veya müşterileri görüntülemek veya bu durumda olduğu gibi, bir e-ticaret sitesinde yeni gelenleri duyurmak için kullanılırlar.

Son örneğe benzer şekilde, bir seçim çerçevesi bileşenini düzgün bir şekilde kaydırmak için TranslateX() işlevini kullanabiliriz:

.marquee-content { animasyon: marquee-scroll 20'ler doğrusal sonsuz; } @keyframes marquee-scroll { 0% { transform:translateX(0); } %100 { transform:translateX(-50%); } }

Seçim çerçevesi kaydırmalı anahtar kareler, bileşenin başlangıç aşamasından bitiş aşamasına kadar nasıl kaydırılacağını tanımlar; burada bileşen, genişliğinin yarısı kadar sola doğru kaydırılır.

Gelecekte Ne Bekleniyor?

Sonsuza kadar kaydırılmasını sağlamak için, animasyon steno özelliğinde animasyon-yineleme-sayımı sonsuz olarak ayarlanmıştır.

CodePen Yerleştirme Geri Dönüşü

Örnek: İskelet düzeni animasyonu

İskelet yükleyiciler, ana içerik yüklenip değiştirilene kadar yer tutucu görevi görür ve beklenmedik düzen değişikliklerini önler. Orijinal içeriğin farklı şekil ve boyutlarından oluşan statik gri bir div olabilirler veya onları bir parıltı efektiyle daha ilgi çekici hale getirebiliriz.

::after sözde öğesini kullanarak varsayılan bir dönüşüm ayarlayabiliriz: TranslateX(-120%); , ardından onu .skeleton bileşeninde sonsuza kadar hareket ettirmek için bir parıltı animasyonu kullanın.

.skeleton::after { içerik: ""; konum: mutlak; ek: 0; dönüştürme: TranslateX(-%120); arka plan: doğrusal gradyan(90 derece, şeffaf, var(--skel-highlight), şeffaf); animasyon: ışıltı 1,15s doğrusal sonsuz; }

Işıltılı anahtar kare, sözde öğeyi -%120'den (soldaki öğenin dışında) %120'ye (sağdaki sayfanın dışında) çevirir ve ardından yeniden başlar

@keyframes ışıltı { 0% { transform:translateX(-120%); } %100 { transform:translateX(120%); } }

CodePen Yerleştirme Geri Dönüşü

Diğer unsurları etkilemez

TranslateX() 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ç bir alanı yokmuş gibi düzende ayrılmış olarak kalır. hiç sevmedim.

/* Çevrilmiş öğe */ .translated { konum: mutlak; üst: 0; sol: 0; dönüşüm: TranslateX(80px); }

“Translated” öğesinin, hareket ettiğinde Kutu 1 veya Kutu 3 öğelerinin kaymasına neden olmadığına dikkat edin.

CodePen Yerleştirme Geri Dönüşü

Yeniden akışları tetikleyebilen veya komşu öğeleri kaydırabilen kenar boşluğundan farklı olarak, yalnızca öğenin görsel olarak oluşturulduğu yerlerdeki değişiklikleri çevirin.

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

TranslateX() işlevini doğrudan bir işaretçi sözde sınıfları üzerinde kullanmak :hover gibi bazen etkileşimleri bozabilir. Öğenin uzağa çevrildiği ve imleçten uzaklaştığı bir durumda, :hover durumu kaybolur ve öğenin hemen orijinal konumuna geri dönmesine neden olur. Başlangıç ​​konumunda, imleç oradadır, dolayısıyla tekrar çevrilir ve sonuçta sürekli titreyen bir döngü oluşur.

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 ) ana öğeye uygulamaktır.

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

CodePen Yerleştirme Geri Dönüşü

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

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