Funktsioon translateX

Funktsioon translateX määrab elemendi nihutamise piki X-telge. Kasutatakse koos omadusega transform. Omaduse väärtuseks on mis tahes suuruse ühikud. Positiivne väärtus nihutab paremale, negatiivne - vasakule.

Süntaks

cssselektor {
  transform: translateX(nihke);
}

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: translateX(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: translateX(-30px);
}

Результат:

Vaata ka