Guia Completo do Transform Playground
O que é CSS Transform?
CSS Transform é uma propriedade que transforma elementos em espaço 2D ou 3D. Você pode alterar a posição, tamanho, rotação e forma de um elemento usando funções como translate, rotate, scale e skew. É usado para animações, UI interativa e efeitos 3D.
Funções de Transform
• Translate(px, px): Move o elemento ao longo dos eixos X, Y. Valores negativos movem na direção oposta. • Rotate(deg): Rotaciona o elemento. Positivo é no sentido horário, negativo é anti-horário. • Scale(n, n): Redimensiona o elemento. 1 é original, <1 reduz, >1 expande. • Skew(deg, deg): Inclina o elemento ao longo dos eixos X, Y. Útil para efeitos de profundidade.
Como Usar
Passo 1: Selecione um preset popular ou configure manualmente na aba personalizada. Passo 2: Ajuste os valores translate, rotate, scale, skew com os sliders. Passo 3: Escolha transform origin como ponto de referência de rotação/escala. Passo 4: Ajuste perspective para efeitos 3D. Passo 5: Visualize o resultado e copie o código CSS para aplicar no seu projeto.
Casos de Uso
• Aplicar mudanças de tamanho em animações de hover de botões • Criar efeitos de virada de cartão interativos • Implementar animações de slide para dropdowns • Adicionar efeitos de rotação a spinners de carregamento • Criar efeitos de cartão 3D para galerias de imagens • Adicionar ênfase com efeitos de inclinação de texto
Perguntas Frequentes (FAQ)
- P. Como é a compatibilidade com navegadores?
- R. A propriedade transform é totalmente suportada em todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Também funciona no IE10 e superior. Algumas transformações 3D podem ter suporte limitado em navegadores mais antigos.
- P. Qual é a diferença entre Transform e Transition?
- R. Transform é uma propriedade que altera a forma ou posição de um elemento, enquanto Transition é uma propriedade que anima essas alterações suavemente. Defina a transformação com Transform, depois use Transition para adicionar tempo para animações naturais.
- P. Posso usar múltiplas transformações juntas?
- R. Sim, você pode encadear múltiplas funções de transform separadas por espaços. Exemplo: transform: translate(10px, 20px) rotate(45deg) scale(1.5); A ordem importa, pois sequências diferentes produzem resultados diferentes.