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

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

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

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

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

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

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

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

Результат:

Həmçinin bax