Transform RotateX com Perspectiva 3D no CSS
Entenda como aplicar transformações visuais impactantes no eixo X usando CSS e GSAP
Por que isso é importante
Transform RotateX com Perspectiva 3D no CSS. Entenda como aplicar transformações visuais impactantes no eixo X usando CSS e GSAP
Entendendo o RotateX
A propriedade transform: rotateX() gira um elemento no eixo horizontal.
Diferente do rotate normal que gira no plano, o rotateX inclina o elemento para frente ou
para trás, criando profundidade.
Aplicando a rotação
Comece com transform: rotateX(40deg) . Você vai ver o elemento inclinando,
como se estivesse dobrando para trás. Sobe para rotateX(80deg) e a rotação
fica mais forte.
Por que fica chapado?
Atenção
Sem perspective , a rotação 3D não tem profundidade. O efeito fica sem graça
e artificial.
Adicionando perspectiva
Coloca perspective: 3000px no container pai. Quanto maior o valor, mais suave
fica o efeito 3D.
Posicionando com precisão
Para controlar o ponto de origem da perspectiva, usa perspective-origin .
O padrão é center center , mas você pode testar 50% 60% para
descer um pouco. Experimenta com 71% ou 23% e vê a diferença.
Definindo posição absoluta
Info técnica
Para o elemento flutuar direito na tela, usa position: absolute e
ajusta o top conforme necessário.
Controlando a escala no eixo X
Para comprimir ou expandir horizontalmente, usa scaleX() dentro do transform . Começa com scaleX(0.44) e depois anima.
Encaixando tudo visualmente
Ajustando top: 23% e perspective-origin: 50% 23% , você alinha
a origem da rotação com o elemento, criando um efeito harmonioso.
Animações com GSAP
Agora usa o GSAP para animar o elemento voltando ao estado original: rotateX: 0deg e scaleX: 1 .
Corrigindo erros comuns
Erro comum
Erro clássico: digitar errado no GSAP, tipo "Takaile" em vez de "scale". Esse tipo de
coisa trava a animação.
Resetando o top
Quando a animação terminar, volta o top: 0 para centralizar o elemento de novo.
Bordas arredondadas
Começa com border-radius: 40px e zera no final da animação com border-radius: 0 para uma transição suave.
Revisão da animação
Testa a animação e vê se os cartões aparecem em sequência, com rotação para cima e
preenchimento completo no final.
Checklist de Animação
Checklist de Implementação
- Aplicou transform rotateX no elemento
- Adicionou perspective no container pai
- Ajustou corretamente o perspective-origin
- Controlou scaleX para visualização horizontal
- Criou animação com GSAP para retornar ao estado original
- Corrigiu erros de digitação nas propriedades do GSAP
- Melhorou estética com border-radius e reset