ფუნქცია 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);
}

Результат:

იხილეთ აგრეთვე