CSS transform: rotate no eixo X sem mistério — guia prático
Translate e rotate clássicos vs rotateX: como a div 'vira' no eixo X com poucos graus e o que isso ensina sobre transform 3D no CSS.
Resposta direta
RotateX muda a percepção 3D da caixa com poucas linhas — base para cards e UI que pedem profundidade sem lib pesada. E aí, por exemplo, se eu der 40 graus, olha o que que acontece, tá vendo? E agora com o GSAP, eu vou fazer com que ela volte à posição original, que é preenchidinho, sem 3D, sem nada.
Translate e rotate no plano
Como que a gente pode fazer de forma muito fácil, muito tranquila. A gente tem o transform translate e tem o transform rotate. Mas tem o transform rotate X, que é no eixo X.
E aí, por exemplo, se eu der 40 graus, olha o que que acontece, tá vendo? Então, é como se a nossa div tava assim e ela fez assim, ó. Se eu der 80 graus, agora ela fez assim, ó.
O que rotateX muda na percepção
Só que esse 3D não tá tão bacana assim, por quê? Dentro do CSS, a gente tem a chamada propriedade perspectiva. A rotação inicial que eu vou querer é de 90 graus.
Não tem posição absoluta, mas a gente precisa colocar posição absoluta. Na esquerda dá para manter, mas eu não vou querer que ela fique no centro. Se eu zerar aqui, ela vai ficar no centro.
Na prática
RotateX muda a percepção 3D da caixa com poucas linhas — base para cards e UI que pedem profundidade sem lib pesada.
Exemplo com 40 graus e leitura visual
Eu vou querer que ela surja daqui de baixo. Na DiviPy tem uma propriedade aqui também chamada Perspective Origin. E agora o padrão é Center Center, ou seja, 50%, 50%.
E no eixo X, realmente eu vou querer 50%. Só que vertical eu vou querer que fique um pouquinho mais pra baixo. Então, eu vou vir aqui, ó, na nossa div obrigado.
E vou deixar um pouquinho mais pra cima. Então, já encaixou certinho com a origem da perspectiva. Então, aqui eu vou dar um scale no eixo X. E aqui em vez de 7, 4, vou colocar 7, 3, para que ela meio que suma mesmo.
Quando usar 3D CSS vs animação JS
E agora com o GSAP, eu vou fazer com que ela volte à posição original, que é preenchidinho, sem 3D, sem nada. Eu vou querer animar agora a nossa div, obrigado. Quais os parâmetros dela eu vou querer animar?
O ScaleX, é só colocar ScaleX, se não me engano, tá? Ele vai para o ScaleX, zero não, 1, que é o padrão, né? No código, no código tá 0.44, ele vai para 1.
Cuidados de performance e acessibilidade
E também no código tá 90 graus, Rotate X. Publicar, vamos ver se vai dar certinho aqui agora. Só que você pode ver que ele rotacionou.
E a gente colocou ele em uma posição absoluta que é 23%. Eu preciso que ele volte pro centro agora, né? Então, uma coisa que eu preciso colocar aqui é o Top 0.
O ScaleX, por algum motivo, ele não seguiu, porque eu coloquei Takaile e não Scale, ScaleX, certo? Uma outra coisa que eu posso fazer também, ele pode originalmente ter bordas arredondadas e depois eu zero essa borda, né? Tem uma bordinha arredondada, então é um charmezinho, né? Então eu posso colocar, por exemplo, Border Radius, que no G-SAP é assim, ó.
Sinais de que está funcionando
Como que a gente pode fazer de forma muito fácil, muito tranquila. A gente tem o transform translate e tem o transform rotate. Mas tem o transform rotate X, que é no eixo X.
O que evitar na primeira semana
Como que a gente pode fazer de forma muito fácil, muito tranquila. A gente tem o transform translate e tem o transform rotate. Mas tem o transform rotate X, que é no eixo X.
Como que a gente pode fazer de forma muito fácil, muito tranquila. A gente tem o transform translate e tem o transform rotate. Mas tem o transform rotate X, que é no eixo X.
Na prática
Próximo passo para «css-transform-rotate-eixo-x»: rode um experimento de 7 dias com uma métrica ligada a css transform rotate eixo x 3d antes de escalar o padrão.