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

selektor {
	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:

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

#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:

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

#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:

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

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

Şeýle-de serediň

translateX funksiýasyny,
X okuly boýunça ýer üýtgetmegi kesgitleýär
translateY funksiýasyny,
Y okuly boýunça ýer üýtgetmegi kesgitleýär