traduzirY()

A função CSS translateY() desloca um elemento verticalmente na quantidade especificada. Especificamente, ele desloca um elemento para cima ou para baixo, dependendo se o valor é positivo ou negativo.

.parent:hover .box {
  transform: translateY(50%); /* Shift down by half the element's height */
}

Junto com outras funções de transformação, ela é usada dentro da propriedade  transform  .

É definido no rascunho  Módulo de transformação CSS nível 1  .

Sintaxe

A sintaxe da função translateY() é assim:

<translateY()> = translateY( <length-percentage> )

Apenas uma maneira elegante de dizer: Traduza (ou mova) o elemento verticalmente nesta quantidade.

Argumentos

/* <length> */
translateY(80px) /* Element moves 80px down*/
translateY(-24ch) /* Element moves 24ch up */

/* <percentage> */
translateY(50%) /* Element moves 50% of the element's height downward */
translateY(-100%) /* Element moves 100% of the element's height upward */

A função translateX() recebe um único argumento <length-percentage> que especifica até que ponto mover o elemento e em que direção, que pode ser para cima (negativo) ou para baixo (positivo).

Pode levar um argumento <length> ou um <percentage> :

• <length>:  Quando é positivo, por exemplo, 20px, ele empurra o elemento 20 pixels para baixo, enquanto valores negativos como -20px empurram o elemento 20 pixels para cima.
• <percentage>:  As porcentagens são relativas à altura do elemento, então translateY(40%) em um elemento de 100px de altura empurra o elemento 40px para baixo, enquanto translateY(-40%) empurra o elemento 40px para cima.

Uso básico

As funções translate são ideais para animações mais simples, pois não atrapalham o fluxo do documento. Especificamente, a função translateY() é ótima para animações “pop-up” ou “fade-in”, onde os elementos podem deslizar de baixo para cima. Tomemos, por exemplo, um componente de cartão (vamos chamá-lo de .stat-card) que desliza para cima quando o usuário clica em um botão ou rola para baixo.

Os componentes são inicialmente deslocados 50 pixels para baixo, ocultos com um valor opacity de 0.

.stat-card {
  /* ... */
  opacity: 0;
  transform: translateY(50px);

  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

Então, quando outro elemento (vamos chamá-lo de .dashboard) se tornar .active, os componentes .stat-card tornam-se totalmente visíveis e são traduzidos para sua posição original na página.

.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}

Podemos até adicionar uma “microanimação” sempre que o usuário passar o mouse sobre qualquer um dos .stat-card movendo-o ligeiramente para cima por 8px, graças ao uso de um valor negativo:

.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}

Animação de campo de formulário em foco

Os campos de formulário geralmente usam uma borda azul para indicar o foco, mas podem ser mais interessantes. Em bibliotecas de UI como  MUI , o rótulo do componente  TextField  inicialmente serve como um espaço reservado, mas quando um usuário foca no campo, ele se move para o topo e assume a posição do rótulo.

Podemos implementar uma animação semelhante aplicando a função translateY() a os elementos input e label .

Para começar, inicialmente colocamos o elemento label dentro do elemento input como um espaço reservado usando absolute posicionamento.

label {
  position: absolute;
  left: 15px;
  top: 15px;

  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

Então, quando o usuário focar no campo input , o label é traduzido 32px para servir como rótulo.

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}

A posição label é restaurada quando o usuário perde o foco do elemento input .

Não afeta outros elementos

A função translateY() , como outras funções transform , não afeta o fluxo de documentos. Em vez disso, desloca visualmente o elemento transladado para uma nova posição sem empurrar os elementos em seu entorno ou os que estão na nova posição. Além disso, o espaço que o elemento ocupava originalmente permanece reservado no layout como se não tivesse sido movido.

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateY(40px);
}

Observe como o deslocamento do elemento “Traduzido” não afeta o posicionamento dos outros elementos ao seu redor.

Ao contrário de margin, que pode acionar refluxos ou deslocar elementos vizinhos, translateY() muda apenas onde o elemento é renderizado visualmente.

Problemas com pseudoclasses de ponteiro

Usar translateY() diretamente em pseudoclasses de ponteiro como :hover às vezes pode interromper interações. Em uma situação em que o elemento é transladado para longe e se afasta do cursor, o estado :hover se perde, fazendo com que o elemento retorne imediatamente à sua posição original. Na posição inicial, o cursor está lá, então ele se traduz novamente, resultando em um loop contínuo e intermitente.

Uma solução simples para isso é colocar o elemento a ser traduzido em um contêiner pai e aplicar a pseudoclasse (:hover) ao elemento pai, enquanto o elemento principal assume a função de tradução.

/* Problem case */
.bad:hover {
  transform: translateY(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateY(160px);
}

Demonstração

Especificação

A função CSS translateY() é definida no  CSS Transforms Module Level 1 , que está atualmente nos rascunhos do editor.

Suporte ao navegador

A função translateY() tem suporte básico em todos os navegadores modernos.

translateY() originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.