Transform RotateX com Perspectiva 3D no CSS

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 <code>transform: rotateX(40deg)</code> . Você vai ver o elemento inclinando, como se estivesse dobrando para trás. Sobe para <code>rotateX(80deg)</code> e a rotação fica mais forte.

Por que fica chapado?

Adicionando perspectiva

Coloca <code>perspective: 3000px</code> 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 <code>perspective-origin</code> . O padrão é <code>center center</code> , mas você pode testar <code>50% 60%</code> para descer um pouco. Experimenta com 71% ou 23% e vê a diferença.

Definindo posição absoluta

Controlando a escala no eixo X

Para comprimir ou expandir horizontalmente, usa <code>scaleX()</code> dentro do <code>transform</code> . Começa com <code>scaleX(0.44)</code> e depois anima.

Encaixando tudo visualmente

Ajustando <code>top: 23%</code> e <code>perspective-origin: 50% 23%</code> , 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: <code>rotateX: 0deg</code> e <code>scaleX: 1</code> .

Corrigindo erros comuns

Resetando o top

Quando a animação terminar, volta o <code>top: 0</code> para centralizar o elemento de novo.

Bordas arredondadas

Começa com <code>border-radius: 40px</code> e zera no final da animação com <code>border-radius: 0</code> 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