Gerador de transform CSS
Gere valores CSS transform: translate, rotate, scale, skew e, em 3D, perspective, rotateX/rotateY e translateZ, com transform-origin e prévia ao vivo.
Predefinições
Transformações 2D
Transformações 3D
Perspectiva 0 significa nenhuma. Rotações 3D parecem planas sem perspectiva.
Origem da transformação
Pré-visualização
O contorno tracejado mostra o elemento sem transformação; o ponto vermelho é a origem da transformação.
transform: none;
Ferramentas Relacionadas
Ver TodasO que é Gerador de transform CSS?
Combina funções CSS transform com controles deslizantes: translate, rotate, scale e skew em 2D, e perspective, rotateX, rotateY e translateZ em 3D. Um contorno tracejado na prévia mostra a posição original e um ponto vermelho marca a origem da transformação.
Como usar Gerador de transform CSS
- Escolha uma predefinição (Inclinação 3D, Virar, Inclinado, Zoom, Card 3D) ou comece por Nenhum.
- Ajuste mover X/Y, girar, escala X/Y e skew X/Y nas transformações 2D.
- Defina perspectiva, girar X, girar Y e mover Z nas transformações 3D.
- Escolha a origem da transformação na lista ou defina a posição X/Y.
- Copie o código CSS.
Exemplo
Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5
transform: translate(20px, 0) rotate(45deg) scale(1.5);
Quando usar Gerador de transform CSS
Use-o para efeitos de hover, cards que viram, vitrines 3D inclinadas e ajustes precisos de posição. As transformações não afetam o layout (os elementos ao redor não se movem); para mudar o layout, use margens, flexbox ou grid. Combine com o Gerador de animação CSS para animar entre transformações.
Como funciona Gerador de transform CSS
As funções só são escritas quando não são neutras, nesta ordem: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). As transformações são aplicadas da direita para a esquerda em relação ao elemento, então a ordem muda o resultado; perspective() precisa vir primeiro para afetar as funções 3D seguintes. Escalas X/Y iguais são escritas como um único scale(n). O transform-origin só é gerado quando difere do centro padrão (50% 50%).
Casos de Uso Comuns
- Cards de produto inclinados em 3D
- Efeitos de virar card com rotateY(180deg)
- Zoom no hover em imagens
- Rótulos de seção inclinados com skew
- Truques de centralização com translate(-50%, -50%)
Perguntas Frequentes
Qual a diferença entre perspective() e a propriedade perspective?
O perspective() dentro de transform vale apenas para aquele elemento. A propriedade perspective em um elemento pai cria um espaço 3D compartilhado por todos os filhos.
Por que minha rotação 3D parece plana?
Sem perspectiva não há escorço de profundidade. Defina a perspectiva com um valor como 800px.
O transform afeta o layout?
Não. O elemento mantém seu espaço original no layout; só a renderização é movida, girada ou redimensionada.