Essa aula está muito confusa e precisa ser revisada, copiando e colando o que já está pronto funciona, mas fazer sozinho ta muito ruim, exercícios pedem uma coisa o exemplo pronto tem muitos pontos que não foram mencionados, se tenta fazer um exemplo um pouco diferente não consigo porque não explica direito as propriedades, o exemplo do cubo não consegui reproduzir.
Oi Douglas tudo bem?
Não só essa aula mas todo este curso está passando por uma revisão.
Estou aqui para te ajudar a entender enquanto a revisão não fica pronta.
No exemplo do cubo qual é a dúvida?
.face {
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.frente {
background-color: red;
transform: translateZ(100px);
}
.direita {
background-color: blue;
transform: translateX(100px) rotateY(90deg);
}
.esquerda {
background-color: green;
transform: translateX(-100px) rotateY(-90deg);
}
.cima {
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
}
.baixo {
background-color: magenta;
transform: translateY(-100px) rotateX(-90deg);
}
.tras {
background-color: cyan;
transform: translateZ(-100px) rotateY(180deg);
}
.cubo {
transform-style: preserve-3d;
width: 200px;
height: 200px;
position: relative;
top: 100px;
left: 100px;
transform: rotateX(10deg) rotateY(10deg);
}Primeira dúvida, porque todas faces devem ser transladada, porque só com o rotate não funciona?
Porque não tem a perspective no body sendo que na aula pede isso?
Porque é transladado 100px sendo que no exemplo da aula está 50 px?
Tenho dúvidas no paralaxe também:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
perspective: 6px;
perspective-origin: 50% 160px;
}
.palavras-home, .titulo-principal {
transform-style: preserve-3d;
}Porque temos que definir o height: 100%?
Porque devemos definir o perspective-origin: 50% 160px, e porque ele recebe dois valores, o exemplo do exercicio cita somente um valor?
Porque o transform-style: preserve-3d; está em dois elementos?
Todas as faces tem que ser transladadas para poder criar o efeito de 3D. Só rotate não ia conseguir criar o cubo corretamente.
Me parece que o translate tá fazendo o papel do perspective nesse caso.
As vezes o professor muda um pouco o código em relação ao que está na aula. Como disse esse curso tem problemas e estamos fazendo revisão.
Se não definirmos o height: 100% não vai preencher toda tela.
O perspective-origin serve para dar a pespesctiva do paralaxe que é tipo um 3D que está na frente da tela. Se tivessemos monitor 3D e oculos 3D e se o HTML5 desse suporte nativamente veriamos as palavras saltando da tela.
O preserve-3D está em dois elementos porque esses dois elementos precisam desse efeito para funcionar como o programador fez a página. O preserve-3D indica que as crianças desse elemento devem ser posicionadas no espaço 3D.
Espero ter respondido as suas perguntas. Se algo não ficou claro pergunte de novo com outras palavras que vou me esforçar para responder da melhor maneira possível.