Функсияи translate

Функсияи translate ҷобаҷокунӣи элементро дар тири X ва тири Y таъин мекунад. Бо якдигар истифода мешавад бо хосияти transform. Қимати хосият ягон воҳиди андоза мебошад.

Метавонад як ё ду параметр қабул кунад. Агар параметрҳо ду бошад - параметри аввал ҷобаҷокунӣро дар тири X таъин мекунад, ва дуюмӣ - дар тири Y. Агар параметр як бошад, пас он ҷобаҷокунӣро дар тири X таъин мекунад.

Қиматҳои параметрҳо метавонанд мусбӣ ва манфӣ бошанд. Қимати мусбӣ дар тири X ба рост ҷобаҷо мекунад, манфӣ - ба чап. Қимати мусбӣ дар тири Y ба поён ҷобаҷо мекунад, манфӣ - ба боло.

Синтаксис

cssинтихобкунанда {
  transform: translate(ҷобаҷокунӣ дар тири X, ҷобаҷокунӣ дар тири Y);
}

Намуна

Агар мушро рӯи блок баранд - он ҷобаҷо мешавад ба 30px ба рост:

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

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

Результат:

Намуна

Агар мушро рӯи блок баранд - он ҷобаҷо мешавад ба 30px ба чап:

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

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

Результат:

Намуна

Агар мушро рӯи блок баранд - он ҷобаҷо мешавад ба 15px ба рост ва ба 30px ба поён:

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

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

Результат:

Ҳамчунин нигаред