Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como animar o eixo transversal no CSS?

Olá, pessoal. Tudo bem com vocês?

Por gentileza eu gostaria de saber como faço para estar animando o eixo transversal em css? Sei que ao utilizar a propriedade transform: translateX(); ou transform: translateY(); eu consigo animar os eixos horizontal e vertical, mas e o transversal?.

Seguindo a lógica eu teria que utilizar a propriedade transform: translateZ(); porém quando utilizo-a não tenho exito. plano cartesiano eixo transversal

Estou colocando uma foto do plano cartesiano onde eu gostaria que acontecesse a animação para que fique mais fácil de entender o que estou querendo.

Agraço imensamente se alguém puder me ajudar.

1 resposta
solução!

Boa tarde, Gabriel! Tudo bem?

A propriedade translateZ() precisa também da propriedade perspective() para funcionar. A função perspective() define a distância entre o plano da tela do seu computador e o elemento HTML. Por exemplo:

  transform: perspective(100px) translateZ(5px);

Apliquei um caso no codepen pra você ver:

https://codepen.io/mmhillman/pen/ExbjxaW

Bons estudos!