Translate, Rotate e Scale
Mova elementos com translate(), gire-os com rotate() e redimensione-os com scale().
Translate, Rotate e Scale é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
A propriedade de transformação
transform aplica transformações visuais em 2D e 3D aos elementos: movimento, rotação, escala e inclinação. As transformações acontecem depois da disposição — elas não afetam os elementos ao redor.
translate()
Move um elemento de sua posição atual. Argumentos: deslocamento em x e y.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Funções individuais para cada eixo, facilitando a compreensão:
<div class="slide-in active">Slide panel</div>rotate()
Gira um elemento por um determinado ângulo. Valores positivos fazem a rotação no sentido horário.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Dimensiona um elemento uniformemente ou por eixo. Valores menores que 1 reduzem o tamanho; valores maiores que 1 aumentam-no.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() e scaleY()
Dimensione independentemente em um dos eixos:
<div class="logo">LOGO</div>Combinação de transformações
Várias funções de transformação são aplicadas em ordem (da direita para a esquerda). A ordem influencia o resultado.
<div class="card demo-active">Card</div>Origem da transformação
transform-origin define o ponto de pivô para rotações e dimensionamentos. O padrão é o centro (50% 50%).
<div class="card demo-active">Card</div>Propriedades individuais de transformação
CSS moderno permite definir funções de transformação individuais como propriedades separadas:
<div class="card demo-active">Card</div>Transição com transformações
A transformação é uma das duas propriedades compostas pela GPU. Anime sempre essa propriedade com uma transição para obter efeitos suaves e eficientes:
<div class="card demo-active">Card</div>translate() em vez de top/left
Prefira sempre transform: translate() a top/left para animações. A transformação é composta pela GPU; top/left aciona um recálculo da disposição a cada quadro.
Verificação rápida
Qual função de transformação espelha um elemento horizontalmente, como ao virar um cartão?
Recapitulação
transform move, gira e dimensiona elementos após a disposição, sem afetar o conteúdo ao redor. Utilize translate() para movimento, rotate() para rotação e scale() para redimensionamento. Encadeie várias funções em uma única declaração. CSS moderno oferece suporte a propriedades de transformação individuais. Anime sempre com transições para obter desempenho com composição pela GPU.
Perguntas Frequentes
A aula “Translate, Rotate e Scale” é grátis?
Sim — o texto completo de “Translate, Rotate e Scale” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Translate, Rotate e Scale”?
Mova elementos com translate(), gire-os com rotate() e redimensione-os com scale(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Translate, Rotate e Scale”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Translate, Rotate e Scale
- Transformações Skew e Matrix
- Origem da Transformação e Perspectiva
- Transformações 3D: rotateX rotateY translateZ