Gerador de CSS Transform
Monte transformações CSS visualmente — translate, rotate, scale, skew, além de perspective e transform-origin. Arraste os controles, veja a prévia ao vivo e copie o CSS de transform pronto.
O Gerador de CSS Transform é uma ferramenta visual gratuita para criar valores de transform em CSS. Ajuste translate, rotate, scale, skew, perspective e transform-origin com controles simples e veja uma prévia ao vivo atualizar em tempo real. Quando o resultado ficar certo, copie o CSS de transform limpo e cole direto na sua folha de estilos. Tudo roda no seu navegador, sem imagens, bibliotecas ou cadastro.
O que é um gerador de CSS transform?
A propriedade transform do CSS permite mover, girar, redimensionar e inclinar um elemento sem afetar o layout ao redor. Escrever essas funções à mão exige lembrar a sintaxe de translateX, rotate, scale, skewX e das demais, e adivinhar como elas se combinam. Este gerador oferece um controle deslizante para cada função de transform, aplica tudo em uma caixa de prévia ao vivo e escreve o CSS de transform correspondente para você. Ele inclui apenas as funções que você realmente alterou, então a saída fica curta e legível.
Como usar o gerador de CSS transform
Criar uma transformação leva apenas alguns passos:
- Arraste os controles de translate para mover a caixa nos eixos X e Y.
- Defina um ângulo de rotação em graus para girar o elemento em torno da origem.
- Aumente ou reduza a escala do elemento, de forma uniforme ou com fatores X e Y separados.
- Adicione inclinação no eixo X ou Y e, se quiser, uma perspectiva e uma origem da transformação.
- Copie o CSS de transform gerado e aplique no seu próprio elemento.
Como funcionam as funções de transform do CSS?
translateX e translateY deslocam um elemento por um comprimento sem mudar sua posição no fluxo do documento. rotate o gira por um ângulo em graus em torno da transform-origin. scale multiplica o tamanho, onde 1 é o tamanho original, valores acima de 1 o aumentam e valores abaixo de 1 o reduzem. skewX e skewY inclinam o elemento ao longo de um eixo. perspective adiciona profundidade para que rotações e escalas pareçam tridimensionais. As funções são aplicadas na ordem em que aparecem, e por isso o gerador as emite em uma sequência fixa e previsível.
O que é transform-origin?
transform-origin define o ponto em torno do qual um elemento é girado, escalado e inclinado. O padrão é o centro do elemento, mas você pode ancorá-lo em um canto ou em uma borda, como superior esquerdo ou inferior direito. Mudar a origem mantém as mesmas funções de transform, mas as pivota em torno de outro ponto, o que é útil para efeitos como um cartão virando a partir de uma borda ou um selo girando em torno de um canto.
Por que usar este gerador de CSS transform?
- 100% gratuito, sem anúncios, cadastro ou limites.
- Prévia ao vivo que atualiza na hora conforme você arrasta cada controle.
- Cobre translate, rotate, scale, skew, perspective e transform-origin.
- Gera CSS de transform limpo que omite as funções não alteradas.
- Copie o CSS gerado para a área de transferência com um clique.
- Roda inteiramente no seu navegador, então nada é enviado.
Perguntas frequentes
O gerador de CSS transform é gratuito?
Sim. Toda ferramenta da ToolsSoup é completamente gratuita, sem conta, cadastro ou limites ocultos.
O CSS de transform gerado funciona em todos os navegadores?
Sim. A propriedade transform e suas funções têm suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, então o CSS que esta ferramenta produz funciona sem prefixos.
Por que algumas funções de transform não aparecem na saída?
O gerador inclui apenas funções cujo valor difere do padrão, então funções de translate, rotate, scale e skew não alteradas ficam de fora para manter o CSS curto. Se todos os valores estiverem no padrão, a saída é transform: none.
Meus dados são enviados para algum lugar?
Não. O gerador roda inteiramente no seu navegador, então nada do que você configura é enviado ou armazenado em servidores.