Gerador de Transform
Combine translate, rotate, scale e skew num único transform.
Propriedades CSS utilizadas
transformAplica transformações geométricas (translação, rotação, escala, inclinação) sem afetar o fluxo do documento — o espaço original do elemento é preservado.
Ordem das funçõesA ordem importa: translate(rotate(scale(x))) produz um resultado diferente de scale(rotate(translate(x))), pois cada função opera sobre o sistema de coordenadas já transformado pela anterior.
Perguntas frequentes
Não. O elemento é transformado visualmente, mas o espaço que ele ocupava no fluxo permanece o mesmo.
Sim, é uma das propriedades mais baratas de animar porque roda na GPU, ao lado de opacity.
Use transform-origin (ex: 'center', 'top left') para mudar o ponto a partir do qual rotate/scale acontecem.
Ferramentas relacionadas
Gerador de Transitions
Configure propriedade, duração, easing e delay para transições suaves.
Gerador de Hover Effects
Efeitos de hover prontos — elevação, brilho, borda animada — para aplicar em qualquer elemento.
Gerador de Animações (@keyframes)
Escolha um preset de animação, ajuste duração e timing, e copie o @keyframes pronto.