O que faz aquele transform translate ?

Oioi João Victor! Tudo bem com você?

Bom, basicamente o translate serve para reposicionar um elemento na direção horizontal e/ou vertical na sua página. Nesse caso, em que foi utilizado o transform: translate(-50%, -50%), a ideia era reposicionar o título no banner. Esses valores (-50%, -50%) representam respectivamente o eixo X e o eixo Y, ou seja, o primeiro informa para onde o título vai se deslocar na horizontal e o segundo, na vertical.

Aqui essa função foi utilizada para trazer o título mais para trás horizontalmente (-50% no eixo X) e mais para cima verticalmente (-50% no eixo Y). Repare que se você retirar essa propriedade, o título vai sair do centro do banner, vai ir para a direita e desce um pouco no sentido vertical, tendo uma parte cortada, por isso o translate é utilizado para transladar esse título para o centro e elevar um pouco sua posição.

Uma última dica que pode ser bastante útil quando surgirem essas dúvidas é acessar a documentação no MDN, em que você consegue observar com detalhes o que cada função do CSS faz e agregar no seu aprendizado:

• translate() - CSS | MDN

Espero ter solucionado sua questão.

Caso ainda tenha alguma dúvida, me coloco à disposição!

Grande abraço e bons estudos!

Okay entendi como funciona, porém ainda fiquei com algumas dúvidas o que é transladar e por quê ele não modificou diretamente no LEFT e no TOP do CSS , existe algo a mais sobre questão de usar o translate() para ser responsivo ou algo do tipo?

Oii João Victor! Tudo certo?

Transladar seria o mesmo que mover. Aqui também seria possível mudar a posição desse título com o left ou top do jeito que você comentou, que na verdade são propriedades do position: absolute. Se por exemplo apagarmos o transform: translate(), poderíamos aplicar outros números no left e no top até que esse título centralizasse, inclusive utilizando unidades com % e mantendo a responsividade.

Na verdade existem muitas formas de posicionar elementos com CSS. Nessa situação específica, creio que o instrutor optou por usar o transform: translate() simplesmente porque ele viu que seria mais prático na ocasião desse posicionamento, pois visualizando o posicionamento em que o título ficou só com o position: absolute ele já pode enxergar que com o transform de -50% ele chegaria ao posicionamento desejado, sem precisar ficar testando no left e no top até centralizar. Com o transform, ele apenas joga esse título 50% para cima e para trás, o que já vai deixar essa centralização perfeita facilmente.

Mas como já comentei, ambas as formas seriam válidas, pois chegam ao resultado desejado, apenas optamos pelo uso do transform aqui pois chegaria no resultado perfeito de maneira mais simples, mas você pode testar de várias formas e ver a que prefere.

Bons Estudos!

Se ainda tiver alguma dúvida, fique à vontade para perguntar!