tercümeY()

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

.parent:hover .box { transform:translateY(50%); /* Elemanın yüksekliğini yarıya kadar aşağı kaydır */ }

CodePen Yerleştirme Geri Dönüşü

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.

TranslateY() fonksiyonunun sözdizimi şuna benzer:

= TranslateY( )

Teknik Analiz

Bunu söylemenin süslü bir yolu: Öğeyi dikey olarak bu kadar çevirin (veya taşıyın).

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

Sistem Güvenliği

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

Bir veya bir argümanı alabilir:

Sonuç ve Değerlendirme

: Pozitif olduğunda, ör. 20px, öğeyi 20 piksel aşağı iter, -20px gibi negatif değerler ise öğeyi 20 piksel yukarı iter.

Olumlu olduğunda, ör. gibi negatif değerler öğeyi 20 piksel yukarı iterken, öğeyi 20 piksel aşağı iter. : Yüzdeler, öğenin yüksekliğine göredir; bu nedenle, 100 piksel uzunluğundaki bir öğedeki TranslateY(40%), öğeyi 40 piksel aşağı iterken, TranslateY(-40%), öğeyi 40 piksel yukarı iter.

Önemli Gelişmeler

Çeviri işlevleri, belge akışını bozmadığından daha basit animasyonlar için idealdir. Özellikle, TranslateY() işlevi, öğelerin alttan kayabileceği "açılır pencere" veya "karartma" animasyonları için mükemmeldir. Örneğin, kullanıcı bir düğmeyi tıklattığında veya aşağı kaydırdığında yukarı kayan bir kart bileşenini (buna .stat-card diyelim) bakalım.

Bileşenler başlangıçta 50 piksel aşağı doğru kaydırılır ve 0 opaklık değeriyle gizlenir.

.stat-card { /* ... */ opaklık: 0; dönüşüm: TranslateY(50px); geçiş: opaklık 0,8 sn kolaylaştırma, dönüştürme 0,8 sn kolaylaştırma, kutu gölgesi 0,3 sn kolaylaştırma; }

Uzmanların Görüşleri

Daha sonra başka bir öğe (buna .dashboard diyelim) .active olduğunda, .stat-card bileşenleri tamamen görünür hale gelir ve sayfadaki orijinal konumlarına çevrilir.

Gelecekte Ne Bekleniyor?

.dashboard.active .stat-card { opaklık: 1; dönüşüm: çeviriY(0); }

Negatif bir değer kullanmamız sayesinde, kullanıcı herhangi bir .stat kartının üzerine geldiğinde kartı 8 piksel yukarıya doğru hareket ettirerek bir "mikro animasyon" bile ekleyebiliriz:

Nasıl Önlem Alınmalı?

.dashboard.active .stat-card:hover { transform:translateY(-8px); }

CodePen Yerleştirme Geri Dönüşü

Detaylar ve Etkileri

Odaklanmış form alanı animasyonu

Form alanları genellikle odağı belirtmek için mavi bir kenarlık kullanır ancak daha ilgi çekici olabilirler. MUI gibi kullanıcı arayüzü kitaplıklarında, TextField bileşeninin etiketi başlangıçta yer tutucu görevi görür, ancak kullanıcı alana odaklandığında en üste gider ve etiketin konumunu alır.

Benzer bir animasyonu input ve label elemanlarına TranslateY() fonksiyonunu uygulayarak uygulayabiliriz.

Başlamak için, mutlak konumlandırmayı kullanarak başlangıçta etiket öğesini giriş öğesinin içine yer tutucu olarak yerleştiririz.

etiket { konum: mutlak; sol: 15 piksel; üst: 15 piksel; işaretçi olayları: yok; dönüşüm-kökeni: sol üst; geçiş: 0,25s kübik-bezier dönüşümü (0,4, 0, 0,2, 1); }

Daha sonra kullanıcı giriş alanına odaklandığında etiket, etiket görevi görecek şekilde 32 piksel yukarıya çevrilir.

giriş:odak ~ etiket, giriş:not(:yer tutucu-gösterilen) ~ etiket { transform: çeviriY(-32px) ölçek(0,8); renk: #6200ee; yazı tipi ağırlığı: kalın; }

Kullanıcı giriş öğesinden odağını kaybettiğinde etiketin konumu geri yüklenir.

CodePen Yerleştirme Geri Dönüşü

Diğer unsurları etkilemez

TranslateY() 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üşüm: TranslateY(40px); }

"Translated" öğesini kaydırmanın, etrafındaki diğer öğelerin yerleşimini nasıl etkilemediğine dikkat edin.

CodePen Yerleştirme Geri Dönüşü

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

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

TranslateY() 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:translateY(160px); } /* Çözüm */ .parent:hover .good { transform:translateY(160px); }

CodePen Yerleştirme Geri Dönüşü

CodePen Yerleştirme Geri Dönüşü

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

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