Gerador de Transformação
Crie e visualize visualmente as propriedades de transformação CSS.
CSS Transform é uma poderosa propriedade CSS que permite transformar elementos da web no espaço 2D ou 3D. Através de transformações como translação, rotação, escala e inclinação, você pode criar designs da web dinâmicos e interativos. Crie facilmente os efeitos desejados com a visualização em tempo real.
transform: none;Funções de Transformação
- • translate(x, y): translate(x, y): Mover elemento pela quantidade x, y
- • scale(x, y): scale(x, y): Escalar elemento pela proporção x, y
- • rotate(angle): rotate(ângulo): Girar elemento pelo ângulo
- • skew(x, y): skew(x, y): Inclinar elemento pelos graus x, y
Dicas de Uso
- • Múltiplas funções de transformação podem ser combinadas com espaços
- • Mude a origem da transformação com transform-origin
- • Use com transição para criar efeitos de animação
- • Use a propriedade perspective para transformações 3D
🎯 Conceitos Básicos de Transformação
CSS Transform é uma propriedade CSS que altera a forma, tamanho e posição dos elementos. Permite a transformação visual de elementos sem interromper o fluxo normal do documento.
Sintaxe básica:
transform: function(value) function(value) ...;📐 Detalhes da Função de Transformação
🔄 Transladar (Movimento)
- •
translate(x, y): translate(x, y): Mover ao longo dos eixos X, Y - •
translateX(x): translateX(x): Mover apenas ao longo do eixo X - •
translateY(y): translateY(y): Mover apenas ao longo do eixo Y - •
translate3d(x, y, z): translate3d(x, y, z): Movimento 3D
transform: translate(50px, 100px);📏 Escala (Redimensionamento)
- •
scale(x, y): scale(x, y): Escalar eixos X, Y - •
scaleX(x): scaleX(x): Escalar apenas o eixo X - •
scaleY(y): scaleY(y): Escalar apenas o eixo Y - • Maior que 1 aumenta, menor que 1 diminui
transform: scale(1.5, 0.8);🔄 Girar (Rotação)
- •
rotate(angle): rotate(ângulo): Girar em torno do eixo Z - •
rotateX(angle): rotateX(ângulo): Girar em torno do eixo X - •
rotateY(angle): rotateY(ângulo): Girar em torno do eixo Y - • Use unidades deg, rad, turn para ângulos
transform: rotate(45deg);📐 Inclinar (Cisalhamento)
- •
skew(x, y): skew(x, y): Inclinar ao longo dos eixos X, Y - •
skewX(angle): skewX(ângulo): Inclinar ao longo do eixo X - •
skewY(angle): skewY(ângulo): Inclinar ao longo do eixo Y - • Transformar em forma de paralelogramo
transform: skew(15deg, 5deg);🎨 Origem da Transformação (Ponto de Transformação)
A propriedade transform-origin define o ponto de origem da transformação. O padrão é o centro do elemento (50% 50%).
Usando palavras-chave
transform-origin: top left;Usando porcentagens
transform-origin: 25% 75%;Usando pixels
transform-origin: 10px 20px;⚡ Dicas de Otimização de Desempenho
✅ Recomendações
- • Anime apenas transform e opacity
- • Use a propriedade will-change
- • Use aceleração 3D (translateZ(0))
- • Crie camadas compostas para melhor desempenho
❌ Coisas a Evitar
- • Animar largura, altura
- • Animar posições left, top
- • Aninhamento excessivo de transformações
- • Uso desnecessário de will-change
Exemplo de otimização de desempenho:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animação e Transições
Transform pode ser usado com CSS Transition e Animation para criar efeitos suaves.
Exemplo de transição
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Exemplo de Animação de Keyframe
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Compatibilidade do Navegador
CSS Transform é suportado em todos os navegadores modernos, mas prefixos de fornecedores podem ser necessários para navegadores mais antigos.
Exemplo de prefixo de fornecedor:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Exemplos de Uso no Mundo Real
Efeito de hover em cartão
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Spinner de carregamento
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Efeito de entrada de modal
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Efeito de clique de botão
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Ferramentas de Depuração e Desenvolvimento
Ferramentas de Desenvolvedor do Navegador
- • Edição em tempo real no painel Elementos
- • Verifique os valores finais na guia Computado
- • Análise de desempenho com a guia Desempenho
- • Verifique a estrutura da camada com a Visualização 3D
Propriedades CSS Úteis
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Dicas Profissionais
Dica de Desempenho
Usar transform3d() ou translateZ(0) para criar camadas compostas para aceleração de GPU pode melhorar significativamente o desempenho da animação.
Dica de Acessibilidade
Use a media query prefers-reduced-motion para fornecer alternativas para usuários sensíveis ao movimento.
Dica de Design
Definir corretamente transform-origin pode criar efeitos de transformação mais naturais.
Dica de Desenvolvimento
Usar variáveis CSS para controlar dinamicamente os valores de transformação facilita a integração com JavaScript.