Propriedade Translate
Última atualização: 2026-09-13
translate Propriedade Translate
A propriedade translate é uma propriedade de transformação individual que move um elemento no espaço 2D ou 3D. Tem o mesmo efeito que transform: translate(), mas, como propriedade independente, pode controlar a translação separadamente, sem afetar outras transformações como rotação e escala — muito útil quando você deseja animar cada transformação de forma independente.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
translate: none | <length-percentage> [<length-percentage> [<length>]?]?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem translação |
<length> | <percentage> | Tipo | O valor da translação (x, y, z podem ser especificados) |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| translate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： O translate aceita de 1 a 3 valores: um valor move apenas no eixo X; dois valores movem nos eixos X e Y; um terceiro valor também move no eixo Z (o que precisa de uma perspectiva para ser visível).
Dica： As porcentagens no translate são relativas ao próprio tamanho do elemento, não ao seu pai — ao contrário de left/top.
❓ Perguntas Frequentes
QQual é a diferença entre a propriedade translate e left/top?
AO translate produz apenas um deslocamento visual: não altera o fluxo do documento e não dispara reflow; o navegador promove o elemento a uma camada de composição tratada pela GPU, mantendo a animação suave. Já left/top alteram a posição no layout, forçando reflow e repaint a cada quadro — pior desempenho, e empurram os elementos ao redor. Para animações e movimento ao passar o mouse, prefira translate ou transform: translate().
QExiste alguma diferença de desempenho entre translate e transform: translate()?
AAmbos renderizam quase de forma idêntica e ambos rodam em uma camada de composição. A verdadeira diferença está no controle: a propriedade translate independente pode ser animada por conta própria, sem sobrescrever valores de transform já existentes no elemento, como rotação ou escala — ótimo para animar cada transformação de forma independente. Já transform: translate() vive na mesma lista das outras funções, então alterá-lo significa reescrever toda a lista.
QA que se referem as porcentagens do translate, e por que isso é diferente de left?
AAs porcentagens no translate são relativas às próprias dimensões do elemento, enquanto as porcentagens em left/top são relativas ao bloco conteúdo (containing block). Por exemplo, translate: 100% move o elemento para a direita por sua própria largura. Aproveitando isso, position: absolute junto com translate: -50% -50% centraliza um elemento horizontal e verticalmente sem precisar saber seu tamanho.
QPor que não consigo ver nenhum efeito visual do translateZ no meu código CSS?
AO translateZ move ao longo do eixo Z, mas sem perspectiva o tamanho da projeção não muda, então o elemento parece estático. Dê ao elemento pai uma propriedade perspective, ou inclua a função perspective() em um transform, para ver a mudança de profundidade em que o próximo é maior e o distante é menor. Pela mesma razão, o terceiro valor do translate só importa em cenas 3D.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
