translate функцияси

translate функцияси элементни X ва Y ўқи бўйича силжитишни белгилайди. transform хусусияти билан бирга ишлатилади. Хусусиятнинг қиймати сифатида ҳажм учун бирликлар ишлатилади.

Битта ёки иккита параметр қабул қилиши мумкин. Агар параметрлар иккита бўлса - биринчи параметр X ўқи бўйича силжитишни белгилайди, иккинчиси эса Y ўқи бўйича. Агар параметр битта бўлса, у Х ўқи бўйича силжитишни белгилайди.

Параметрларнинг қийматлари мусбат ва манфий бўлиши мумкин. Х ўқи бўйича мусбат қиймат ўнгга силжитади, манфий қиймат - чапга. 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);
}

Результат:

Шунингдек қаранг