Translate funksiýasy

translate funksiýasy elementy X we Y okullary boýunça ýerini üýtgetmek üçin ulanylýar. transform häsiýeti bilen bilelikde ulanylýar. Häsiýetiň bahasy hökmünde häsiýet ölçeg birlikleriniň islendik biri ulanylyp bilner.

Bir ýa-da iki parametr kabul edip bilýär. Eger parametrler iki bolsa - birinji parametr X okuly boýunça ýer üýtgetmegi, ikinjisi bolsa Y okuly boýunça ýer üýtgetmegi kesgitleýär. Eger parametr bir bolsa, onda ol X okuly boýunça ýer üýtgetmegi kesgitleýär.

Parametrleriň bahalary positiv we negativ bolup bilner. X okuly boýunça positiv baha saga, negativi bolsa çapa ýer üýtgetmegi aňladýar. Y okuly boýunça positiv baha aşak, negativi bolsa ýokary ýer üýtgetmegi aňladýar.

Sintaksis

cssselektor {
  transform: translate(X okuly boýunça ýer üýtgetme, Y okuly boýunça ýer üýtgetme);
}

Mysal

Eger elementüň üstüne çüýşe getirilse - ol 30px saga ýer üýtger:

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

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

Результат:

Mysal

Eger elementüň üstüne çüýşe getirilse - ol 30px çapa ýer üýtger:

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

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

Результат:

Mysal

Eger elementüň üstüne çüýşe getirilse - ol 15px saga we 30px aşak ýer üýtger:

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

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

Результат:

Şeýle-de serediň