translate функциясы

translate функциясы элементті X және Y осі бойынша жылжытуды белгілейді. transform сипатымен бірге қолданылады. Сипат мәні ретінде кез келген өлшем бірліктері қызмет етеді.

Бір немесе екі параметр қабылдай алады. Егер параметрлер саны екі болса - бірінші параметр X осі бойынша жылжытуды, ал екіншісі - Y осі бойынша жылжытуды белгілейді. Егер параметр бір ғана болса, онда ол X осі бойынша жылжытуды белгілейді.

Параметрлердің мәндері оң немесе теріс болуы мүмкін. X осі бойынша оң мән оңға қарай жылжытады, теріс мән - солға қарай. Y осі бойынша оң мән төмен қарай жылжытады, теріс мән - жоғары қарай.

Синтаксис

cssселектор {
  transform: translate(X осі бойынша жылжыту, Y осі бойынша жылжыту);
}

Мысал

Егер блоктың үстіне тінтуірді әкелсеңіз - ол 30px оңға қарай жылжиды:

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

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

Результат:

Мысал

Егер блоктың үстіне тінтуірді әкелсеңіз - ол 30px солға қарай жылжиды:

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

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

Результат:

Мысал

Егер блоктың үстіне тінтуірді әкелсеңіз - ол 15px оңға және 30px төмен қарай жылжиды:

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

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

Результат:

Сондай-ақ қараңыз