Função skew(): Distorcendo elementos

A função skew() da propriedade transform é usada para distorcer um elemento em um ângulo específico, ao longo do eixo X (horizontal) ou Y (vertical), ou ambos. É como se você estivesse "empurrando" um lado do elemento, fazendo-o inclinar. Isso pode ser usado para criar efeitos de perspectiva, sombras estilizadas ou designs gráficos interessantes.

Pense na função skew() como se você estivesse pegando um retângulo de papel e empurrando um de seus cantos, fazendo com que ele se incline e se transforme em um paralelogramo.

Como funciona `skew()`

A função skew() aceita um ou dois valores de ângulo que representam a distorção ao longo dos eixos X e Y.

1. `skew(anguloX, anguloY)` (2D)

Esta é a forma completa e permite distorcer o elemento em ambos os eixos.

anguloX: Valor do ângulo para distorcer o elemento ao longo do eixo horizontal (X).
- Valores positivos inclinam a parte superior para a direita e a parte inferior para a esquerda.
- Valores negativos inclinam a parte superior para a esquerda e a parte inferior para a direita.
anguloY: Valor do ângulo para distorcer o elemento ao longo do eixo vertical (Y).
- Valores positivos inclinam a parte esquerda para baixo e a parte direita para cima.
- Valores negativos inclinam a parte esquerda para cima e a parte direita para baixo.

Sintaxe: transform: skew(<anguloX>, <anguloY>);

Exemplos:

transform: skew(20deg, 0);
- Distorce o elemento 20 graus horizontalmente.
transform: skew(10deg, 15deg);
- Distorce o elemento 10 graus horizontalmente e 15 graus verticalmente.

2. `skewX(angulo)` (2D)

Distorce o elemento apenas ao longo do eixo horizontal (X).

Sintaxe: transform: skewX(<angulo>);

Exemplo:

transform: skewX(30deg);
- Distorce o elemento 30 graus horizontalmente.

3. `skewY(angulo)` (2D)

Distorce o elemento apenas ao longo do eixo vertical (Y).

Sintaxe: transform: skewY(-15deg);

Exemplo:

transform: skewY(-15deg);
- Distorce o elemento 15 graus verticalmente, inclinando a parte esquerda para cima.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Função skew()</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
      padding: 20px;
    }

    .box {
      width: 150px;
      height: 100px;
      background-color: #FFC107;
      border: 2px solid #FFA000;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      font-weight: bold;
      font-size: 1.1em;
      transition: transform 0.3s ease-out; /* Transição suave */
      cursor: pointer;
    }

    .box:hover {
      background-color: #FFD700;
    }

    /* --- Exemplos de skew() --- */

    .skew-xy-box:hover {
      transform: skew(15deg, 10deg); /* Distorce em X e Y */
    }

    .skew-x-box:hover {
      transform: skewX(25deg); /* Distorce apenas em X */
    }

    .skew-y-box:hover {
      transform: skewY(-20deg); /* Distorce apenas em Y */
    }

    .skew-text-effect {
      background-color: #2196F3;
      border-color: #1976D2;
      color: white;
      font-size: 1.5em;
      width: 200px;
      height: 80px;
      transform: skewX(-10deg); /* Efeito de texto inclinado */
    }
    .skew-text-effect:hover {
      transform: skewX(-10deg) scale(1.05); /* Combina skew com scale */
    }
  </style>
</head>
<body>
  <div class="box skew-xy-box">skew(X,Y)</div>
  <div class="box skew-x-box">skewX(X)</div>
  <div class="box skew-y-box">skewY(Y)</div>
  <div class="box skew-text-effect">Texto Inclinado</div>
</body>
</html>

Resultado:

Passe o mouse sobre cada caixa para ver o efeito de skew() em ação.
Observe como os elementos se inclinam, criando uma sensação de distorção ou perspectiva.

Pontos Chave:

Ângulos: Os valores são ângulos, geralmente em deg (graus).
Não afeta o layout: Assim como outras funções de transform, skew() é uma transformação visual e não altera o espaço que o elemento ocupa no fluxo do documento.
Ponto de Pivô: Por padrão, a distorção ocorre em torno do centro do elemento. Você pode mudar isso com a propriedade transform-origin, que veremos em uma lição futura.
Uso Criativo: skew() é frequentemente usado para criar efeitos gráficos estilizados, como botões com aparência de "corte" ou elementos que parecem estar em movimento rápido.

A função skew() adiciona uma camada extra de criatividade às suas transformações, permitindo que você crie designs mais dinâmicos e com personalidade.

Como funciona skew()

1. skew(anguloX, anguloY) (2D)