Gerador de CSS transform
Combine deslocamento, rotação, escala e inclinação e copie o transform com a origem.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Ordem e unidades
| Campo | Unidade | Função gerada |
|---|---|---|
| Deslocamento X e Y | px | translate, translateX ou translateY |
| Rotação | graus | rotate |
| Escala X e Y | %, saída decimal (150 vira 1.5) | scale, scaleX ou scaleY |
| Inclinação X e Y | graus, de -89 a 89 | skew, skewX ou skewY |
As funções saem sempre na ordem deslocar, girar, escalar e inclinar, e o resultado de uma ordem diferente seria outro. Valores neutros são omitidos.
Resultados de referência: CSS transform
| Escolhas | CSS gerado |
|---|---|
| girar 45 graus | transform: rotate(45deg); |
| subir 4px e ampliar para 105% | transform: translateY(-4px) scale(1.05); |
| escala horizontal -100 (espelho) | transform: scaleX(-1); |
| inclinar -10 graus com origem embaixo à esquerda | transform: skewX(-10deg); transform-origin: bottom left; |
A origem muda o ponto fixo da rotação e da escala; o padrão, o centro, não aparece na saída. A transformação não desloca os vizinhos no layout.
Perguntas frequentes
Como usar o css transform rotate e scale juntos?
Preencha rotação e escala: as duas funções saem na mesma declaração, rotate antes de scale. Para girar 45 graus o resultado é: transform: rotate(45deg);
O css transform translate muda o layout da página?
Não. O elemento é desenhado em outra posição, mas o espaço que ele ocupa no fluxo continua o mesmo.