Depois de transformar as palavras em 3d e dar perspectivas à elas, eu não consigo mais selecionar o titulo e subtitulo da pagina (e isso parece meio errado), se alguém puder dar uma olhada estarei deixando o meu index.html e o index.css
É nessa parte que ocorre o "erro":
header ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 6px;
}
Quando estiver num computador posso analisar melhor, mas talvez seja porque a <ul> das palavras venha primeiro no HTML e você colocou o seu tamanho como 100%. Provavelmente a <ul> está em cima de tudo. Mas não tenho certeza sobre isso.
Pensei nessa possibilidade Axell, troquei a ordem no html mas o resultado seguiu o mesmo
Fiz o teste no meu próprio site que estou montando ao longo do curso e está do mesmo jeito. O único jeito de selecionar o título e o subtítulo é selecionar o cabeçalho a partir da parte do padding.
Após refletir um pouco sobre isso achei que poderia ser a questão do z-index das palavras ser maior, ou seja, as palavras estariam numa camada acima dos outros elementos. Mas fiz o teste colocando o z-index do <h1> como 9999 e não consegui selecioná-lo.
Com mais um pouco de raciocínio percebi algo que poderia o motivo desse comportamento, achei que poderia ser porque as palavras estão no mundo 3D e, além disso, estão à frente do usuário (Z > 0). O que fiz então foi abrir meu site, inspecioná-lo pelo navegador e deletar a <ul> das palavras, depois de fazer isso percebi que o título voltava a ser selecionável, então eu tinha certeza que o problema era as palavras. Depois o que fiz foi colocar as cotas (coordenadas Z) das palavras negativas, ou seja, elas foram para trás do cabeçalho, e percebi que o título também voltava a ser selecionável !! Está aí o motivo do problema :)
Então acredito que não tenha como resolver exatamente. A única forma de deixar as coisas selecionáveis seria colocar uma coordenada Z maior para todos os textos do cabeçalho e depois transladá-los para onde estavam e, então, diminuí-los com a função scale.