5.7 Transformações e Responsividade

🔧 Transformações no CSS (transform)

A propriedade transform permite modificar a forma, posição e orientação de um elemento HTML. As transformações mais comuns são:

• scale() – Redimensiona

• rotate() – Gira

• translate() – Move

• skew() – Inclina

Essas transformações funcionam isoladas ou combinadas.

---

✅ Exemplos detalhados

🔍 1. scale() – Aumenta ou diminui um elemento

cssCopiarEditarimg:hover {
  transform: scale(1.2); /* Aumenta em 20% */
}

👉 Explicação: scale(1.2) aumenta a largura e a altura em 20%. Você também pode usar scaleX() e scaleY() para escalas separadas:

cssCopiarEditarimg:hover {
  transform: scaleX(1.5); /* Largura 50% maior */
}

---

🔄 2. rotate() – Gira o elemento

cssCopiarEditarimg:hover {
  transform: rotate(10deg); /* Gira 10 graus no sentido horário */
}

👉 Dica: Use deg para graus ou turn para frações de volta.

cssCopiarEditardiv {
  transform: rotate(0.5turn); /* Meia volta (180 graus) */
}

---

✋ 3. translate() – Move o elemento

cssCopiarEditarbutton:hover {
  transform: translate(20px, 10px); /* Move 20px para a direita e 10px para baixo */
}

👉 Muito útil para animações de entrada/saída, ou efeitos ao passar o mouse.

---

🌀 4. Combinação de transformações

cssCopiarEditarimg:hover {
  transform: scale(1.2) rotate(10deg) translate(10px, 5px);
}

👉 Ordem importa! Primeiro escala, depois gira e depois move.

---

🔄 5. skew() – Inclina o elemento

cssCopiarEditardiv:hover {
  transform: skew(20deg, 10deg); /* Inclina horizontalmente e verticalmente */
}

---

💡 Dica Extra: Transições suaves com transition

Para suavizar o efeito:

cssCopiarEditarimg {
  transition: transform 0.3s ease;
}