# 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**

```css
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:

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

***

**🔄 2. `rotate()` – Gira o elemento**

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

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

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

***

**✋ 3. `translate()` – Move o elemento**

```css
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**

```css
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**

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

***

#### 💡 Dica Extra: Transições suaves com `transition`

Para suavizar o efeito:

```css
cssCopiarEditarimg {
  transition: transform 0.3s ease;
}
```