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

TranslateZ

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.

4 respostas
solução!

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!