Gerador de transformação CSS
Opções
Demo
Translate
Scale
Rotate
Skew
Origin & 3D
Visualização ao vivo
Front
Back
Estado
Inativo
O que é o gerador de transformação CSS?
Esta ferramenta ajuda a construir valores de transformação CSS para translação, dimensionamento, rotação, inclinação e transformações 3D.
É útil para efeitos de foco, cartões animados, adesivos inclinados, giros 3D, emblemas e elementos de interface de usuário interativos.
Como usar o gerador de transformação CSS
- Insira valores de conversão, escala, rotação, inclinação e origem da transformação.
- Use a visualização ao vivo para ver a transformação visualmente.
- Clique em Gerar para produzir um valor de transformação CSS normalizado.
- Cole um valor de transformação existente para analisá-lo e editá-lo.
Dicas
- A ordem de transformação é importante, portanto, alterar a ordem da função altera o resultado.
- Use perspectiva com rotateX e rotateY para efeitos 3D mais fortes.
- preserve-3d é útil quando as camadas secundárias precisam de profundidade 3D real.
- backface-visibility hidden é útil para efeitos de virada de cartas.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de Clip-Path CSS
Gere e analise valores de `clip-path` CSS para polígonos, círculos, elipses e formas `inset`.
Utilitários Diversos
›
Gerador de raio de borda CSS
Gere e analise valores de raio de borda CSS com visualização ao vivo.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Perguntas frequentes sobre o gerador de transformação CSS
Esta ferramenta pode gerar valores de rotação e tradução?
Sim. Ele suporta traduzirX, traduzirY, girar, escalaX, escalaY, skewX e skewY.
Posso analisar um valor transform() existente?
Sim. Cole um valor de transformação na caixa de entrada e clique em Analisar.
A origem da transformação importa?
Sim. Ele controla o ponto de articulação usado para dimensionamento e rotação.
Existe uma visualização ao vivo?
Sim. A visualização é atualizada conforme você altera os controles de transformação.
O que é o gerador de transformação CSS?
Esta ferramenta ajuda a construir valores de transformação CSS para translação, dimensionamento, rotação, inclinação e transformações 3D.
É útil para efeitos de foco, cartões animados, adesivos inclinados, giros 3D, emblemas e elementos de interface de usuário interativos.
Como usar o gerador de transformação CSS
- Insira valores de conversão, escala, rotação, inclinação e origem da transformação.
- Use a visualização ao vivo para ver a transformação visualmente.
- Clique em Gerar para produzir um valor de transformação CSS normalizado.
- Cole um valor de transformação existente para analisá-lo e editá-lo.
Dicas
- A ordem de transformação é importante, portanto, alterar a ordem da função altera o resultado.
- Use perspectiva com rotateX e rotateY para efeitos 3D mais fortes.
- preserve-3d é útil quando as camadas secundárias precisam de profundidade 3D real.
- backface-visibility hidden é útil para efeitos de virada de cartas.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de Clip-Path CSS
Gere e analise valores de `clip-path` CSS para polígonos, círculos, elipses e formas `inset`.
Utilitários Diversos
›
Gerador de raio de borda CSS
Gere e analise valores de raio de borda CSS com visualização ao vivo.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Perguntas frequentes sobre o gerador de transformação CSS
Esta ferramenta pode gerar valores de rotação e tradução?
Sim. Ele suporta traduzirX, traduzirY, girar, escalaX, escalaY, skewX e skewY.
Posso analisar um valor transform() existente?
Sim. Cole um valor de transformação na caixa de entrada e clique em Analisar.
A origem da transformação importa?
Sim. Ele controla o ponto de articulação usado para dimensionamento e rotação.
Existe uma visualização ao vivo?
Sim. A visualização é atualizada conforme você altera os controles de transformação.