A propriedade CSS translate

página anterior transition-timing-function
Próxima página unicode-bidi

Definição e uso

translate A propriedade permite que você altere a posição do elemento.

translate A propriedade define as coordenadas do eixo x e y do elemento em espaço bidimensional. Você também pode definir a coordenada do eixo z para alterar a posição no espaço tridimensional.

As coordenadas podem ser fornecidas apenas com o eixo x, com os eixos x e y, ou com os eixos x, y e z.

Para melhor entender translate Para ver a propriedadeDemonstração.

Dica:Para que a propriedade do eixo z funcione, você precisa definir um valor para a propriedade CSS perspective.

Atenção:Outra técnica para transladar elementos é usar A função CSS translate() A propriedade CSS transform dessa página pode ser dita como um método mais simples e direto para transladar elementos.

Exemplo

Exemplo 1

Mudar a posição do elemento:

div {
  translate: 100px 20px;
}

Experimente você mesmo

Exemplo 2

Quando definimos o eixo z translate A propriedade deve ser definida também no elemento pai ao definir perspective Para vermos qualquer efeito, precisamos definir a propriedade

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Experimente você mesmo

Sintaxe CSS

translate: x-axis y-axis z-axis|initial|inherit;

Valor da propriedade

Valor	Descrição
x-axis	Define a posição no eixo x. Valores possíveis: Comprimento Porcentagem
y-axis	Define a posição no eixo y. Valores possíveis: Comprimento Porcentagem
z-axis	Define a posição no eixo z. Valores possíveis: Comprimento Porcentagem
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	none
Herança:	Não
Produção de animação:	Suporte. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe JavaScript:	object.style.translate="10px 20px"