Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvidas sobre a aula 4

Olá,

Comparei o meu código (https://github.com/rruizdasilva/curso_html_css) com o do projeto baixado e consegui fazer os ajustes para que a página funcionasse. Nesse ínterim, tive as dúvidas abaixo. Poderiam me ajudar?

1) Por que é necessário "position: absolute" em .palavra-home se ele já existe no pai .palavras-home?

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?

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

4) Ao remover o código "transform-style: preserve-3d" dentro de .palavras-home, nada ocorreu. Por quê?

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?

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?

    html,body {
    overflow-x: hidden;
    height: 100%;
}
3 respostas

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!

@Felipe, obrigado.

Apenas na questão 2 ainda fiquei com dúvida. No eixo X foi usado porcentagem e no Y foi usado pixels. A escolha foi meramente didática ou há uma razão pos trás?

solução!

Roger, foi didática e existe uma razão, deixe-me explicar

Ele usou para demonstrar as medidas que podem ser usadas, ele poderia ter feito com px em ambos, mas seria mais difícil de calcular.

Ou poderia usar % em ambos mas aí ele não saberia a angulação correta de acordo com a tela.