translate Fonksiyonu
translate fonksiyonu, bir elemanı
X ve Y eksenleri boyunca öteler. transform
özelliği ile birlikte kullanılır.
Değer olarak herhangi bir boyut birimi
kullanılabilir.
Bir veya iki parametre alabilir. Eğer iki parametre varsa - ilk parametre X ekseni boyunca, ikinci parametre ise Y ekseni boyunca ötelemeyi belirler. Eğer parametre tek ise, X ekseni boyunca ötelemeyi belirler.
Parametre değerleri pozitif veya negatif olabilir. X eksenindeki pozitif bir değer sağa, negatif bir değer ise sola doğru öteler. Y eksenindeki pozitif bir değer aşağıya, negatif bir değer ise yukarıya doğru öteler.
Sözdizimi
seçici {
transform: translate(X ekseni ötelemesi, Y ekseni ötelemesi);
}
Örnek
Fare ile kutunun üzerine gelindiğinde, kutu
30px sağa doğru ötelenecektir:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(30px);
}
:
Örnek
Fare ile kutunun üzerine gelindiğinde, kutu
30px sola doğru ötelenecektir:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(-30px);
}
:
Örnek
Fare ile kutunun üzerine gelindiğinde, kutu
15px sağa ve 30px aşağıya doğru ötelenecektir:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(15px, 30px);
}
:
Ayrıca Bakınız
-
X ekseni boyunca öteleme yapan
translateX
fonksiyonu -
Y ekseni boyunca öteleme yapan
translateY
fonksiyonu