Funktsioon translate

Funktsioon translate määrab elemendi nihke piki X-telge ja Y-telge. Kasutatakse koos omadusega transform. Omaduse väärtusteks on mis tahes suuruse ühikud.

Võib võtta ühe või kaks parameetrit. Kui parameetreid on kaks - esimene parameeter määrab nihke piki X-telge ja teine - piki Y-telge. Kui parameeter on üks, siis see määrab nihke piki X-telge.

Parameetrite väärtused võivad olla positiivsed ja negatiivsed. Positiivne väärtus piki X-telge nihutab paremale, negatiivne - vasakule. Positiivne väärtus piki Y-telge nihutab alla, negatiivne - üles.

Süntaks

cssvalija {
  transform: translate(nihe piki X-telge, nihe piki Y-telge);
}

Näide

Kui hiirega bloki peale minna - see nihkub 30px võrra paremale:

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

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

Результат:

Näide

Kui hiirega bloki peale minna - see nihkub 30px võrra vasakule:

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

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

Результат:

Näide

Kui hiirega bloki peale minna - see nihkub 15px võrra paremale ja 30px võrra alla:

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

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

Результат:

Vaata ka