Gerador de transform CSS (girar, mover, escalar, inclinar e 3D)

Gerador de transform CSS (girar, mover, escalar, inclinar e 3D): para que serve

A propriedade transform move, gira, escala e inclina elementos sem mexer no layout da página, e é a forma mais leve de animar. Mexa nos controles de mover, girar, escalar, inclinar e girar em 3D, escolha o ponto de origem e a perspectiva, e veja o cartão mudar na hora.

O código sai na ordem em que o navegador aplica as funções e, com a opção de hover, inclui uma transição suave limitada a quem usa mouse e desligada para quem pediu menos movimento. A página explica por que a ordem importa e por que animar transform é mais leve que animar top, left ou width.

Como usar

1. Mexa nos controles.
2. Escolha a origem e, no 3D, a perspectiva.
3. Copie o CSS.

Quando usar

• Efeitos de hover em cartões.
• Ícones girados e espelhados.
• Cartões que viram em 3D.

Perguntas frequentes

A ordem das funções no transform importa?

Importa. 'translateX(100px) rotate(45deg)' move e depois gira no lugar; 'rotate(45deg) translateX(100px)' gira primeiro e depois anda na direção já girada, terminando em outro ponto. O gerador usa a ordem mover, girar, escalar e inclinar, a mais previsível.

Por que usar transform em animações?

Transform e opacity são as propriedades mais baratas de animar: não fazem o navegador recalcular o layout da página e costumam rodar na placa de vídeo. Animar top, left, width ou margin, em vez disso, deixa a animação travada em celulares mais fracos.

O que faz a perspectiva?

Nas rotações em 3D (rotateX e rotateY), a perspectiva define a distância do observador: valores pequenos, como 300px, dão um efeito 3D forte e deformado; valores grandes, como 1500px, deixam o giro mais suave.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas