Функция translateY - сдвиг элемента по оси Y
Функция translateY задает сдвиг элемента
по оси Y. Используется совместно со свойством
transform.
Значением свойства служат любые единицы
для размера. Положительное значение сдвигает
вниз, отрицательное - вверх.
Синтаксис
селектор {
transform: translateY(сдвиг);
}Пример
Если навести мышкой на блок - он сдвинется
на 30px вниз:
<div id="elem"></div>#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}:
Пример
Если навести мышкой на блок - он сдвинется
на 30px вверх:
<div id="elem"></div>#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}:
Смотрите также
-
функцию
translate,
которая задает сдвиг по осям X и Y -
функцию
translateX,
которая задает сдвиг по оси X