Estou tentando entender o translate. Inicialmente foi definido top e left 50%, então se formos tentar entender o translate, é como se ele levasse em consideração um eixo no ponto A ou ponto B ? Tentei ilustrar uma imagem pra melhor explicar minha dúvida, mas não sei se ficou claro o suficiente, mas acho que bugou e a imagem não ta indo. :(
Olá, Afrânio.
Tudo bem?
O translate() move um elemento de sua posição atual (de acordo com os parâmetros fornecidos para o eixo X e o eixo Y). o eixo X é horizaontal e o Y vertical.
O exemplo a seguir move o elemento <div> 50 pixels para a direita e 100 pixels para baixo de sua posição atual:
div {
transform: translate(50px, 100px);
}Espero ter ajudado. Qualquer dúvida pode mandar aqui de novo. Valeu.