6XC

Gerador de Transform CSS

Combine rotate, scale, translate e skew visualmente e copie o CSS transform resultante.

971 visualizações

A Propriedade transform

transform move, rotaciona, escala e inclina um elemento sem afetar o fluxo do documento, e é acelerada por GPU — por isso transform (junto com opacity) é a propriedade preferida para animações suaves. As funções são aplicadas da direita para a esquerda, então a ordem delas importa: rotate(45deg) translateX(50px) não é o mesmo que o inverso.

Perguntas Frequentes

Por que a ordem das funções importa?

Cada função transforma o sistema de coordenadas para a próxima. translate seguido de rotate move primeiro e gira no lugar; rotate seguido de translate gira o eixo primeiro, então o movimento vai na diagonal.

O transform afeta os elementos ao redor?

Não — o elemento mantém seu espaço original no layout. Isso torna o transform barato de animar, mas exige atenção às sobreposições.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar