translateY Fonksiyonu

translateY fonksiyonu, bir öğeyi Y ekseni boyunca kaydırır. transform özelliği ile birlikte kullanılır. Değer olarak herhangi bir boyut birimi kullanılabilir. Pozitif bir değer aşağı kaydırır, negatif bir değer ise yukarı kaydırır.

Sözdizimi

cssseçici {
  transform: translateY(kaydırma);
}

Örnek

Fare bloğun üzerine getirildiğinde, blok aşağı doğru 30px kayar:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(30px);
}

Результат:

Örnek

Fare bloğun üzerine getirildiğinde, blok yukarı doğru 30px kayar:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(-30px);
}

Результат:

Ayrıca Bakınız