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
seçici {
transform: translateY(kaydırma);
}
Örnek
Fare bloğun üzerine getirildiğinde, blok
aşağı doğru 30px kayar:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Ayrıca Bakınız
-
X ve Y eksenleri boyunca kaydırma yapan
translatefonksiyonu -
X ekseni boyunca kaydırma yapan
translateXfonksiyonu
