Gerador de Transformação CSS

O que faz

O Gerador de Transformação CSS combina valores de translate, rotate, scale e skew em uma única declaração transform: pronta para colar. Ajuste os controles deslizantes e campos numéricos e o CSS gerado é atualizado instantaneamente — sem necessidade de escrever a sintaxe da função manualmente ou lembrar a ordem que o CSS espera.

As funções de transformação

Uma declaração CSS transform é uma lista de funções separadas por espaço, cada uma alterando o elemento de uma forma diferente:

• translate(x, y) — move o elemento horizontal e verticalmente, em pixels. X positivo move para a direita, Y positivo move para baixo.
• rotate(deg) — gira o elemento no sentido horário em torno de sua origem (o centro, por padrão). Valores negativos giram no sentido anti-horário.
• scale(x, y) — redimensiona o elemento ao longo de cada eixo. 1 é o tamanho original, 2 o dobra, 0.5 o reduz pela metade, e um valor negativo inverte o elemento ao longo desse eixo.
• skew(x, y) — inclina o elemento ao longo de cada eixo, em graus, produzindo uma distorção semelhante a um paralelogramo frequentemente usada para títulos estilizados ou efeitos de cartão.

A ordem das funções importa

Os navegadores aplicam funções de transformação na ordem em que são escritas, cada uma operando no sistema de coordenadas deixado pela função anterior. Esta ferramenta sempre as escreve em uma ordem fixa — translate, rotate, scale, skew — que é a ordem mais previsível para combinar deslocamento, rotação e dimensionamento sem uma função distorcer o efeito de outra. Se você precisar de uma ordem de composição diferente para um efeito específico, reordene as funções manualmente após copiar o CSS.

Para manter a saída limpa, uma função é incluída apenas quando realmente altera algo: translate(0px, 0px), rotate(0deg), scale(1, 1) e skew(0deg, 0deg) são todas operações nulas, portanto são omitidas. Se cada valor estiver em seu padrão, a ferramenta emite transform: none;.

Como usar

1. Defina Traduzir X e Traduzir Y para mover o elemento, em pixels.
2. Arraste Girar para girá-lo, em graus (-360 a 360).
3. Defina Escala X e Escala Y para redimensioná-lo — 1 mantém o tamanho original.
4. Arraste Inclinação X e Inclinação Y para incliná-lo, em graus.
5. Copie a declaração transform gerada a partir da saída do código e cole-a em sua folha de estilos.

Perguntas frequentes

Por que scale é um número simples em vez de uma porcentagem? A função CSS scale() usa um multiplicador sem unidade, não uma porcentagem — 1.5 significa 150% do tamanho original, 0.5 significa 50%. Corresponder à sintaxe CSS bruta significa que você pode colar a saída diretamente sem conversão.

Posso animar uma transformação construída com esta ferramenta? Sim — transform é um alvo comum para propriedades CSS transition/animation. Adicione uma regra transition: transform 0.3s ease; ao lado dela (no estado base ou :hover) para animar entre valores.

A ordem de translate/rotate/scale/skew altera o resultado visual? Sim. Como cada função opera no sistema de coordenadas deixado pela função anterior, translate() depois rotate() produz um resultado diferente de rotate() depois translate(). Esta ferramenta usa uma ordem fixa e previsível; edite o CSS copiado manualmente se precisar de uma composição diferente.

Esta ferramenta armazena ou carrega algo? Não. Todos os cálculos são executados localmente no seu navegador — seus valores nunca saem do seu dispositivo.