Roger, bom dia!
Muito boa as suas dúvidas, é sempre bom revisar os exercícios para melhorar o aprendizado, vamos lá:
1) Por que é necessário "position: absolute" em .palavra-home se ele já existe no pai .palavras-home?
Resposta: Porque a position absolute usa como referência o primeiro antecessor com uma position definida se não houver nenhum ele usa como referência a tela do navegador, Pensando nisso se ele não tivesse colocado na palavras-home
seria bem mais complicado para definir a posição de cada palavra do palavra-home
visto que ele usaria como referência o navegador
2- Por que o perspective-origin foi utilizado com % no eixo X e px no eixo Y (perspective-origin: 50% 160px)? Há uma razão prática para isso? Qual foi o raciocínio?
Resposta: Foi colocado assim justamente para dar uma sensação de alteração na visão do usuário, assim como o exercício do cubo, dependendo do local onde você coloca essa propriedade, muda a visão do usuário.
Abaixo vai um exemplo prático:
Exemplo
3 - No dia a dia dos devs, é comum utilizar perspective e perspective-origin fora da tag body? Fiquei na dúvida porque uma perspectiva teria de ter relação com a tela do PC e a tag body, no exercício do curso, compreende todos os elementos da tela
Resposta: Depende do contexto da página, caso você queira fazer um cubo por exemplo em um cubo, você pode colocar na <div>
que englobe cada uma das faces(outras <div>
),
4 - Ao remover o código "transform-style: preserve-3d" dentro de .palavras-home, nada ocorreu. Por quê?
Resposta: Nas transformações, o estilo pode ser Flat ou 3D. No flat, nos a transformação no eixo Z é ignorada. Vocẽ terá transformações em X e em Y. O Z é quem determina qual elemento vai sobrepor qual. No Flat os elementos aparecem no fluxo padrão de página, no 3D não. Encontrei um exemplo legal neste link: http://codepen.io/impressivewebs/pen/pIgBf
Por padrão o estilo é flat, é o primeiro caso quando abrir o link. O estilo no eixo Z é ignorado. Porém ao clicar no botão, você verá que os elementos ficam posicionados de forma diferente, considerando um espaço 3D e aceitando as sobreposições do Eixo.
Não seria obrigatório por causa que não existe sobreposição, a perspectiva já consegue passar uma ideia de 3d do jeito que está. Isso por que o efeito é simplesmente um distanciamento de fonte. Contudo, acredito que se houvesse sobreposição dos elementos, teria problemas em ver isso acontecendo.
No geral, é melhor deixar explicito que esse é um cenário 3D, por boa prática. assim o navegador já deixa o comportamento definido.
Esse exemplo da aula eu confesso ser simples, mas há outros mais interessantes, um exemplo clássico é um dado, com seis lados. Exemplo: https://codepen.io/tameraydin/pen/CADvB
Neste caso, é muito mais claro de ver o efeito 3d, agora experimente tirar o preserve-d3 do #dice. Você não visualizar mais os números nem os lados do dado, somente um quadrado girando dentro da perspectiva.
5 - A perspectiva foi definida dentro da tag body. Por que as seções (saudação, trabalhos, blog) não foram afetadas já que estão dentro desta tag também?
Resposta: Na realidade elas foram, mas como apenas as palavras do cabeçalho estão com propriedades que impliquem os efeitos 3d, paras as outras seções da página a mudança não foi relevante
Inclusive se você colocar alguma palavra do palavras-home
em outra parte do html verá a diferença
6 - Ao comparar o meu código com o código do projeto baixado, vi que há o código abaixo. Sem ele, a página funcionou corretamente. Qual então é a razão dele estar incluso?
Resposta: Ele fez isso para que página não fique rolando para os lados, dependendo do tamanho do monitor pode ter esse tipo de problema, se não foi necessário para você é porquê seu monitor tem um tamanho que não era preciso essa alteração.
Roger espero ter ajudado e bons estudos!