Função translateY
A função translateY define o deslocamento do elemento
no eixo Y. É usada em conjunto com a propriedade
transform.
O valor da propriedade pode ser qualquer unidade
de tamanho. Um valor positivo desloca o elemento
para baixo, um valor negativo - para cima.
Sintaxe
seletor {
transform: translateY(deslocamento);
}
Exemplo
Ao passar o mouse sobre o bloco - ele se deslocará
30px para baixo:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
Exemplo
Ao passar o mouse sobre o bloco - ele se deslocará
30px para cima:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Veja também
-
a função
translate,
que define o deslocamento nos eixos X e Y -
a função
translateX,
que define o deslocamento no eixo X
