Kazi ya translateX

Kazi translateX inabainisha usogezi wa kipengele kwenye mhimili wa X. Inatumika pamoja na sifa transform. Thamani ya sifa ni yoyote vipimo vya ukubwa. Thamani chanya husogeza kulia, hasi - kushoto.

Kiubora

csskichagua {
  transform: translateX(usogezi);
}

Mfano

Kama unaelekeza kipofu cha kinywa kwenye kipande - kitasogea kwa 30px kulia:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

Mfano

Kama unaelekeza kipofu cha kinywa kwenye kipande - kitasogea kwa 30px kushoto:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

Angalia pia

  • kazi translate,
    ambayo inabainisha usogezi kwenye mihimili X na Y
  • kazi translateY,
    ambayo inabainisha usogezi kwenye mhimili Y