Функцијата 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