As transformações CSS alteram a posição, o tamanho e a orientação dos elementos sem afetar o fluxo do documento. Girar, dimensionar, traduzir e inclinar podem ser combinados em uma única propriedade de transformação e são animados suavemente com transições CSS.
Arraste os controles deslizantes para ver cada transformação aplicada em tempo real. O retângulo tracejado mostra a posição original enquanto o cartão sólido mostra o resultado transformado. Copie o valor de transformação completo quando estiver satisfeito.
Frequently Asked Questions
Q: Qual é a diferença entre traduzir e posicionar?
Qual é a diferença entre traduzir e posicionar? A tradução move um elemento visualmente sem alterar o fluxo do layout. A posição (superior/esquerda) remove o elemento do fluxo ou desloca irmãos. O Translate também é acelerado por GPU e mais rápido para animar.
Q: A transformação afeta o layout?
A transformação afeta o layout? Não. Os elementos transformados mantêm seu espaço original no fluxo do documento, portanto, sobreposições e excessos são comuns — use margens ou preenchimento para reservar espaço.
Q: Posso combinar múltiplas transformações?
Posso combinar múltiplas transformações? Sim, liste-os separados por espaço em uma propriedade: transform: translateX(10px) rotate(45deg) scale(1.2); Eles se aplicam da direita para a esquerda no sistema de coordenadas.
Q: Por que meu elemento girado está embaçado?
Por que meu elemento girado está embaçado? Rotações em ângulos diferentes de 90 graus causam artefatos de suavização de serrilhado. Adicionar uma pequena escala (1.001) ou usar will-change: transform pode ajudar em alguns navegadores.
Q: A transformação funciona com animação?
A transformação funciona com animação? Sim, transformar é uma das propriedades mais baratas para animar. Combine com @keyframes ou transições – a composição de GPU torna tudo mais suave, mesmo em dispositivos móveis.
Cores do Brasil
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
Verde Bandeira #009C3BO verde da bandeira nacional, símbolo das matas
Amarelo Bandeira #FFDF00O ouro do losango da bandeira brasileira
Azul Bandeira #002776O azul do círculo e das estrelas
Azul Azulejo #1E5FA8Herança dos azulejos portugueses em igrejas e casarões
Rosa Choque #FF1493A energia vibrante do carnaval e das marcas jovens
Verde Amazônia #228B22A floresta tropical, pulmão do planeta
Amarelo Ouro #FFD700O ouro do barroco mineiro de Ouro Preto
Terracota Nordestina #CD5C5CA argila do sertão e do artesanato nordestino
Anil #4B0082Cor do vestido tradicional das baianas
Branco Areia #EDE4D3As praias de areia clara do litoral
Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.