translate funksiyası

translate funksiyası elementi X oxu ve Y oxu uzre surusdurur. transform xassesi ile birlikde istifade olunur. Xassenin deyeri kimi istənilən olcu vahidleri istifade edile biler.

Bir ve ya iki parametr qebul ede biler. Əgər iki parametr varsa - birinci parametr X oxu uzre surusdurməni, ikinci isə Y oxu uzre surusdurməni teyin edir. Əgər bir parametr varsa, o, X oxu uzre surusdurməni teyin edir.

Parametrlerin deyerleri musbet ve ya menfi ola biler. X oxu uzre musbet deyer sagi, menfi deyer isə solu gosterir. Y oxu uzre musbet deyer asagi, menfi deyer isə yuxari gosterir.

Sintaksis

selektor {
	transform: translate(X oxu uzre surusdurme, Y oxu uzre surusdurme);
}

Nümunə

Əgər blokun uzərinə siçanı gətirsəniz - o, 30px saga surusdurləcək:

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

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

Nümunə

Əgər blokun uzərinə siçanı gətirsəniz - o, 30px sola surusduruləcək:

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

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

Nümunə

Əgər blokun uzərinə siçanı gətirsəniz - o, 15px saga ve 30px asagi surusduruləcək:

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

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

Həmçinin bax

translateX funksiyası,
ki, X oxu uzre surusdurməni teyin edir
translateY funksiyası,
ki, Y oxu uzre surusdurməni teyin edir