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

cssseçici {
  transform: translate(X ekseni ötelemesi, Y ekseni ötelemesi);
}

Örnek

Fare ile kutunun üzerine gelindiğinde, kutu 30px sağa doğru ötelenecektir:

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

css#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:

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

css#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:

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

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

Результат:

Ayrıca Bakınız