Ferramentas CSS/Gerador de Transform CSS
Gerador de Transform CSS
Crie transformações CSS visualmente com controles de translação, rotação, escala e inclinação
Controles de Transformação
Transladar
0px
0px
Rotacionar
0°
Escalar
1.0
1.0
1.0
Inclinar
0°
0°
Presets
Visualização
Elemento
A borda tracejada mostra a posição original
Código CSS
css
Loading...Guia de CSS Transform
Aprenda sobre transformações CSS e como criar efeitos visuais
O que é CSS Transform?
Transformações CSS permitem modificar a apresentação visual dos elementos transladando (movendo), rotacionando, escalando e inclinando-os. Transformações não afetam o fluxo do documento - outros elementos permanecem no lugar enquanto o elemento transformado se move visualmente.
Funções de Transformação
- translate(): Move elementos horizontal e verticalmente
- rotate(): Rotaciona elementos em torno de um ponto central
- scale(): Aumenta ou diminui o tamanho do elemento
- skew(): Inclina elementos ao longo dos eixos X e Y
Como Usar
- Use os controles de translação para mover o elemento
- Ajuste a rotação para girar o elemento
- Escale para redimensionar o elemento
- Habilite o modo 3D para transformações com perspectiva
Dicas
- Combine múltiplas transformações para efeitos complexos
- Use transform-origin para mudar o ponto de pivô
- Transformações 3D precisam de perspective no elemento pai
Perguntas Frequentes
Qual é a diferença entre translate e position?
Translate move um elemento visualmente sem afetar o fluxo do documento - outros elementos permanecem no lugar. Position (relative, absolute) pode afetar o layout e elementos irmãos. Translate também tem aceleração GPU, tornando-o melhor para animações.
Como mudo o transform origin?
Use a propriedade transform-origin para definir o ponto de pivô. O padrão é 'center center'. Você pode usar palavras-chave (top, left, center, right, bottom), porcentagens ou valores em pixels. Por exemplo, 'transform-origin: top left' rotaciona a partir do canto superior esquerdo.
Por que minha transformação 3D não está funcionando?
Transformações 3D requerem perspective para mostrar profundidade. Adicione 'perspective: 1000px' ao elemento pai. Também certifique-se de que 'transform-style: preserve-3d' esteja definido se você tiver transformações 3D aninhadas. O valor de perspective controla quão pronunciado o efeito 3D aparece.
Posso animar transformações?
Sim, transformações são ideais para animações. Use transições CSS ou animações de keyframe na propriedade transform. Transformações têm aceleração por hardware, proporcionando animações suaves de 60fps. Combine com 'will-change: transform' para melhor desempenho.
Em que ordem as transformações são aplicadas?
Transformações são aplicadas da direita para a esquerda. 'transform: rotate(45deg) translate(100px)' primeiro translada, depois rotaciona. A ordem importa porque cada transformação afeta as seguintes. Para transladar e depois rotacionar, use 'transform: translate(100px) rotate(45deg)'.