ფუნქცია translate

ფუნქცია translate ადგენს ელემენტის გადატანას X და Y ღერძის მიმართ. გამოიყენება თანამშრომლობით თვისებასთან transform. თვისების მნიშვნელობაა ნებისმიერი ერთეული ზომისთვის.

შეიძლება მიიღოს ერთი ან ორი პარამეტრი. თუ პარამეტრი ორია - პირველი პარამეტრი ადგენს გადატანას X ღერძის მიმართ, ხოლო მეორე - Y ღერძის მიმართ. თუ პარამეტრი ერთია, მაშინ ის ადგენს გადატანას X ღერძის მიმართ.

პარამეტრების მნიშვნელობები შეიძლება იყოს დადებითი და უარყოფითი. დადებითი მნიშვნელობა X ღერძის მიმართ გადააქვს მარჯვნივ, უარყოფითი - მარცხნივ. დადებითი მნიშვნელობა Y ღერძის მიმართ გადააქვს ქვემოთ, უარყოფითი - ზემოთ.

სინტაქსი

სელექტორი {
	transform: translate(გადატანა X ღერძის მიმართ, გადატანა Y ღერძის მიმართ);
}

მაგალითი

თუ მაუსი დაიტანეთ ბლოკზე - ის გადაინაცვლებს 30px-ით მარჯვნივ:

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

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

მაგალითი

თუ მაუსი დაიტანეთ ბლოკზე - ის გადაინაცვლებს 30px-ით მარცხნივ:

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

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

მაგალითი

თუ მაუსი დაიტანეთ ბლოკზე - ის გადაინაცვლებს 15px-ით მარჯვნივ და 30px-ით ქვემოთ:

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

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

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

ფუნქციას translateX,
რომელიც ადგენს გადატანას X ღერძის მიმართ
ფუნქციას translateY,
რომელიც ადგენს გადატანას Y ღერძის მიმართ