Elysia Tools
Navegação
Design
Gera propriedades de transformação CSS
Execução
Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.
Exemplos
Relacionado
Pronto para executar
Guia de uso da ferramenta
O Gerador de Transformação CSS permite criar e visualizar propriedades de transformação de elementos web de forma rápida, gerando o código CSS preciso para rotações, escalas, translações e inclinações.
Contexto
Um botão de menu precisa girar 90 graus ao ser clicado para indicar uma mudança de estado.
Problema
Calcular o valor exato da rotação e garantir a sintaxe correta.
Como usar
Ajuste o controle 'Rotacionar' para 90 graus e copie o código resultante.
rotate: 90Resultado
O código 'transform: rotate(90deg);' é gerado instantaneamente para aplicação no CSS.
Contexto
Cards de produtos precisam aumentar levemente de tamanho ao passar o mouse para criar um efeito de destaque.
Problema
Manter a proporção correta durante a escala para evitar distorções.
Como usar
Defina 'Escala X' e 'Escala Y' para 1.1 e utilize o código gerado na regra :hover.
scaleX: 1.1, scaleY: 1.1Resultado
É uma propriedade que permite modificar o espaço de coordenadas de um elemento, permitindo girar, redimensionar, mover ou inclinar elementos HTML.
Sim, o gerador combina os valores selecionados em uma única linha de código CSS, aplicando todas as transformações simultaneamente.
Sim, a propriedade 'transform' é amplamente suportada em todos os navegadores modernos sem a necessidade de prefixos de fornecedor.
A escala altera o tamanho visual do elemento, mas não altera o espaço que ele ocupa no fluxo do documento original.
A translação move o elemento visualmente sem afetar o layout dos elementos vizinhos, enquanto o posicionamento altera o fluxo do documento.
O código 'transform: scaleX(1.1) scaleY(1.1);' é gerado, garantindo um aumento uniforme.