Bom, minha dúvida é a seguinte, estava fazendo o exercício da aula de transformação com as palavras em 3d, e sempre antes de olhar a resolução, pelo "olhometro", eu vou definindo as propriedades para deixar parecido com o proposto do exercício, eu faço isso, por que não gosto simplesmente de copiar e colar as coisa e falar que aprendi, eu quero testar e entender realmente as funcionalidades. Contudo fiquei em dúvida na propriedade translatez(), eu sei que ela está relacionada ao posicionamento de profundidade. A dúvida é a seguinte, ao comparar meu código com o do exercício, vi que tinha algumas diferenças, em alguns itens eu coloquei translateZ(3px) e o exercicio pôs translateZ(1px) e por questão de gosto acabei alterando alguns translateZ do meu código, e percebi que ao fazer essa transição de 3px para 1px o elemento saia do posicionamento indo um pouco mais para cima, por que ocorre esse efeito? Não sei se ficou bem explicado, mas quando a palavra estava com o translateZ(3px) ela estava numa posição, ao alterar para translateZ(1px) a palavra subia e alterava a posição dela. Queria entender o motivo, eu achava que o translateZ apenas iria "aumentar ou diminuir" as palavras conforme você fosse indicando, só que além disso ele mudou o posicionamento.
Solucionado
(ver solução)
respostas
TranslateZ
Fala Gabriel,
Tranquilo?
Então, o translateZ é uma das propriedades para o transform, temos o translateX e o translateY também, pense como um gráfico de 3 dimensões, temos o eixo horizontal (X) e o eixo vertical (Y), e também temos o eixo Z que corresponde a profundidade, e tudo isso é relacionado com o posicionamento do elemento na página, então imagine que você esteja olhando de cima, ou seja, você não vê o eixo Z, somente o X e Y, então se você não alterar o X e Y e alterar só o Z, você verá o elemento aumentando e diminuindo, agora se você não estiver olhando de cima, estiver olhando de algum angulo, ao mudar o Z, você verá ele aumentar e diminuir, e também mudar a posição.
Conseguiu entender? espero não ter complicado mais hehehe.
Obrigado Luiz, ficou perfeita a explicação!! Antes de eu fechar o tópico deixa eu aproveitar o gancho e tirar mais uma dúvida... No caso você falou sobre o ângulo que você olha para a imagem, então e se eu controlar a propriedade perspective origin? Eu consigo alterar meu elemento Z sempre precisar mexer no Y e no X, ou vai ser sempre isso, mexeu na profundidade, automaticamente você precisa reposicionar o X e o Y.
Sim, usando o perspective-origin você consegue mover de onde você estaria olhando de cima o objeto.
Um jeito simples de entender é você criar um cubo no CSS, e ir brincando com essas propriedades o/
Abraços!
Valeu, vou ir testando e aprendendo!