Design e cores

Gerador de transformações CSS

Gerador de transformações CSS — Escolha tamanhos ou cores e confira o código ou resultado. Os dados da ferramenta ficam no seu dispositivo. Sem cadastro.

Sem cadastro

Carregando ferramenta…

Como usar

  1. 1Digite os valores e escolha as opções.
  2. 2Execute a ferramenta e confira o resultado.
  3. 3Copie o resultado ou mude os dados para comparar.

Saiba mais

Confira intervalos e unidades. Os resultados dependem dos dados e do navegador.

Os anúncios podem processar dados de conexão. A personalização segue suas escolhas de privacidade. Privacidade (inglês)

Exemplo calculado de entrada e saída

Resultados do motor real com os valores abaixo, sem dados pessoais ou trabalhos salvos. Carregue o exemplo na ferramenta para conferir as mesmas entradas.

Entrada de exemplo

CampoValor
Deslocamento horizontal (px)
0
Deslocamento vertical (px)
0
Rotação (°)
15
Escala
1

Resultado de exemplo

transform: translate(0px, 0px) rotate(15deg) scale(1);
Condições de entrada

São limites reais de validação, sem garantir que todo valor aceito seja realista ou adequado ao seu caso.

  • Deslocamento horizontal (px): Faixa aceita: -200 ≤ x ≤ 200
  • Deslocamento vertical (px): Faixa aceita: -200 ≤ x ≤ 200
  • Rotação (°): Faixa aceita: -360 ≤ x ≤ 360
  • Escala: Faixa aceita: 0,1 ≤ x ≤ 5

Ferramentas relacionadas

Todas as ferramentas