translateX Fonksiyonu

translateX fonksiyonu, bir öğeyi X ekseninde kaydırır. transform özelliği ile birlikte kullanılır. Değer olarak herhangi bir boyut birimi kullanılabilir. Pozitif değer sağa, negatif değer sola kaydırır.

Sözdizimi

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

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 30px sağa kayar:

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

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

Результат:

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 30px sola kayar:

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

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

Результат:

Ayrıca Bakınız