Gerador de Transformação CSS

Crie transformações CSS 2D: escala, rotação, translação e inclinação

Transforms

1x
0deg
0px
0px
0deg
0deg
BOX
/* No transform active */

Manipulando Elementos com CSS Transform

A propriedade transform permite modificar o espaço de renderização de um elemento, permitindo rotacionar, escalonar, inclinar ou transladar (mover) itens sem alterar o fluxo do documento.

Aceleração de Hardware (GPU)

Diferente de propriedades como top ou margin, as transformações são otimizadas pelo navegador para serem executadas pela GPU. Para obter animações de 60 FPS ultra-suaves, prefira sempre transform: translate() em vez de mover elementos via posicionamento absoluto.

3D e Profundidade

As transformações 2D são a base para efeitos mais avançados. Ao combinar transformações com transições, você cria uma interface "viva" que responde ao usuário com micro-interações fluidas.

Ambiente Seguro: Este gerador é uma ferramenta de auxílio ao desenvolvedor que opera 100% no lado do cliente. Gere seu código com total privacidade.