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
seçici {
transform: translateX(kaydırma);
}
Örnek
Fare ile kutunun üzerine gelindiğinde, kutu
30px sağa kayar:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Ayrıca Bakınız
-
X ve Y eksenlerinde kaydırma yapan
translate
fonksiyonu -
Y ekseninde kaydırma yapan
translateY
fonksiyonu
