Kazi ya translate

Kazi translate huweka kuhama kwa kipengele kwenye mhimili X na mhimili Y. Hutumika pamoja na sifa transform. Thamani ya sifa ni vipimo vyovyote vya ukubwa.

Inaweza kukubali kigezo kimoja au viwili. Ikiwa vigezo ni viwili - kigezo cha kwanza huweka kuhama kwenye mhimili X, na cha pili - kwenye mhimili Y. Ikiwa kigezo ni kimoja, basi huweka kuhama kwenye mhimili X.

Thamani za vigezo zinaweza kuwa chanya na hasi. Thamani chanya kwenye mhimili X husogeza kulia, hasi - kushoto. Thamani chanya kwenye mhimili Y husogeza chini, hasi - juu.

Kiowazi

csskichaguzi {
  transform: translate(kuhama kwenye mhimili X, kuhama kwenye mhimili Y);
}

Mfano

Ikiwa utaelekeza 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: translate(30px);
}

Результат:

Mfano

Ikiwa utaelekeza 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: translate(-30px);
}

Результат:

Mfano

Ikiwa utaelekeza kipofu cha kinywa kwenye kipande - kitasogea kwa 15px kulia na kwa 30px chini:

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

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

Результат:

Angalia pia