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