Na atividade proposta, mesmo utilizando o código do instrutor não é possível visualizar como a propriedade "perspective" e o valor "translateZ" na propriedade "transform" trabalham !!! As palavras vão se deslocando na diagonal, e após o TranslateZ ser alterado para mais de 3px, é possível notar que as palavras vão para trás do header. Como resolver isso ?! por favor, ajudem !
Oi Diego, tudo bem? Deixa eu tentar te ajudar...
Já sabemos que a propriedade transform vai fazer uma transformação em um elemento nosso, certo? Dito isso, o que essa transformação precisa fazer?
Para deixar o elemento como se estivesse disposto em 3D, precisamos trabalhar a profundidade dele. Lembra, temos o valor de X no Width do elemento. Do Y no Height, mas não temos uma profundidade que seria o eixo Z do 3D.
É ai que a perspectiva entra. Ela controla a profundidade aparente do elemento da página. Mas de nada adianta dizer que um elemento tem profundidade, sem dizer em que ponto dela, seus elementos filhos estão.
Isso por que, caso não informemos, ele estará no ponto 0 do eito Z. É como se estivéssemos parados na frente do ônibus olhando diretamente para o motorista (colados no vidro).
Então, considerando isso, usamos o translateZ para dizer que existe uma distância entre o extremo do elemento pai e seus filhos no eixo Z.
Considerando o exemplo do ônibus, é como se déssemos uns passos para trás e dessa forma, conseguimos ver um pouco da lateral do ônibus.
Neste Link, você pode ver um exemplo mais real e clicar nos boxes com os valores do translateZ para comparar o que acontece quando o valor muda: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ