2
respostas

Translações nos elementos da header não se comportam da maneira esperada.

Boa noite,

Estou seguindo as aulas e simplesmente não consigo executar como o instrutor executou, não encontro onde está o erro, ao habilitar a perspectiva e transladar o elemento no eixo Z ele simplesmente sai pra fora da tela (é como se o eixo X e Y não estivessem completamente ortogonais com o Z direto pra tela) resumindo: Ao utilizar o translateZ da propriedade transform o elemento não translada somento no eixo Z mas também nos outros eixos (na diagonal). Se alguém puder me dar uma luz de uma maneira extremamente didática para que eu entenda o que ocorreu eu agradeço muito.

Repositório Github: https://github.com/mathbronca23/projetocss.git

Eu gostaria de entender os conceitos para que eu mesmo corrija, muito obrigado pelo suporte pessoal!

2 respostas

Matheus, boa tarde!

O que está ocorrendo é que o perspective muito perto da tela, assim qualquer mudança nos plano já faz uma grande diferença na visão, fazendo com que ele fique para fora da tela:

O que a corrige isso seria alterar a perspectiva para algo um px maior como uns 15px.

Espero ter ajudado e bons estudos!

Oi Felipe, esse conceito eu entendi completamente, mas acredito que não seja a solução do meu problema, afinal eu só translado no eixo Z o elemento deveria se movimentar em linha reta e perpendicular (perspective-origin: 0 0), e o que ocorre é que o elemento também se desloca no eixo X e Y (Diagonal), como se o vanishing point não estivesse centralizado no elemento, e sim em um dos seus cantos/bordas.

Mesmo assim fico muito grato pela ajuda, Atenciosamente, Matheus.