Função rotate(): Girando elementos (2D e 3D)

A função rotate() da propriedade transform é sua ferramenta para girar elementos visuais no seu layout. Seja um ícone que precisa girar ao ser clicado, um card que vira para revelar informações, ou um elemento que precisa ser posicionado em um ângulo específico, rotate() faz o trabalho.

Pense na função rotate() como um "eixo de rotação" invisível que atravessa o centro do seu elemento (por padrão). Você pode então girar o elemento em torno desse eixo, como um ponteiro de relógio ou uma roda.

Como funciona rotate()

A função rotate() aceita um valor de ângulo que representa o quanto o elemento deve girar.

1. rotate(angulo) (2D)

Esta é a forma mais comum e gira o elemento em torno do seu eixo Z (que aponta para fora da tela, em direção ao observador).

• angulo: Valor que especifica o ângulo de rotação.
  • Valores positivos giram no sentido horário.
  • Valores negativos giram no sentido anti-horário.
  • As unidades mais comuns são deg (graus), mas também pode ser rad (radianos), grad (gradianos) ou turn (voltas).
    • 90deg = 1.57rad = 100grad = 0.25turn

Sintaxe: transform: rotate(<angulo>);

Exemplos:

• transform: rotate(45deg);
  • Gira o elemento 45 graus no sentido horário.
• transform: rotate(-90deg);
  • Gira o elemento 90 graus no sentido anti-horário.
• transform: rotate(0.5turn);
  • Gira o elemento meia volta (180 graus).

2. rotateX(angulo) (3D)

Gira o elemento em torno do eixo X (horizontal). Imagine o elemento girando como uma porta de celeiro.

Sintaxe: transform: rotateX(<angulo>);

Exemplo:

• transform: rotateX(60deg);
  • Gira o elemento 60 graus em torno do eixo X.

3. rotateY(angulo) (3D)

Gira o elemento em torno do eixo Y (vertical). Imagine o elemento girando como uma porta comum.

Sintaxe: transform: rotateY(<angulo>);

Exemplo:

• transform: rotateY(180deg);
  • Gira o elemento 180 graus, mostrando o "verso" (se houver backface-visibility).

4. rotateZ(angulo) (3D)

É o mesmo que rotate(angulo) e gira o elemento em torno do eixo Z.

Sintaxe: transform: rotateZ(<angulo>);

Exemplo:

• transform: rotateZ(270deg);
  • Gira o elemento 270 graus no sentido horário.

5. rotate3d(x, y, z, angulo) (3D)

Gira o elemento em torno de um vetor arbitrário (definido por x, y, z) no espaço 3D.

• x, y, z: Representam as coordenadas do vetor em torno do qual o elemento será girado. Esses valores definem a direção do eixo de rotação.
• angulo: O ângulo de rotação.

Sintaxe: transform: rotate3d(<x>, <y>, <z>, <angulo>);

Exemplo:

• transform: rotate3d(1, 1, 0, 45deg);
  • Gira o elemento 45 graus em torno de um eixo que passa diagonalmente pelo elemento.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Função rotate()</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;
      /* Para ver o efeito 3D, precisamos de perspectiva no pai */
      perspective: 1000px; /* Define a profundidade da perspectiva */
    }

    .box {
      width: 120px;
      height: 120px;
      background-color: #00BCD4;
      border: 2px solid #0097A7;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      transition: transform 0.5s ease-out; /* Transição suave */
      cursor: pointer;
      /* Para ver o verso em 3D */
      transform-style: preserve-3d;
      backface-visibility: hidden; /* Esconde o verso por padrão */
      position: relative;
    }

    .box::before {
      content: "Frente";
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00BCD4;
      border: 2px solid #0097A7;
      backface-visibility: hidden;
    }

    .box::after {
      content: "Verso";
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #FF5733; /* Cor diferente para o verso */
      border: 2px solid #C70039;
      transform: rotateY(180deg); /* Gira o verso para que ele apareça quando a frente girar */
      backface-visibility: hidden;
    }

    .box:hover {
      background-color: #80DEEA;
    }

    /* --- Exemplos de rotate() --- */

    .rotate-2d-box:hover {
      transform: rotate(90deg); /* Gira 90 graus no sentido horário */
    }

    .rotate-x-box:hover {
      transform: rotateX(180deg); /* Gira 180 graus em torno do eixo X */
    }

    .rotate-y-box:hover {
      transform: rotateY(180deg); /* Gira 180 graus em torno do eixo Y */
    }

    .rotate-z-box:hover {
      transform: rotateZ(-45deg); /* Gira 45 graus no sentido anti-horário */
    }

    .rotate3d-box:hover {
      transform: rotate3d(1, 1, 0, 60deg); /* Gira em torno de um vetor diagonal */
    }
  </style>
</head>
<body>
  <div class="box rotate-2d-box">rotate(deg)</div>
  <div class="box rotate-x-box">rotateX(deg)</div>
  <div class="box rotate-y-box">rotateY(deg)</div>
  <div class="box rotate-z-box">rotateZ(deg)</div>
  <div class="box rotate3d-box">rotate3d(x,y,z,deg)</div>
</body>
</html>

Resultado:

• Passe o mouse sobre cada caixa para ver o efeito de rotate() em ação.
• Observe como rotateX() e rotateY() criam uma sensação de profundidade, especialmente quando o elemento gira 180 graus e o "verso" é revelado.

Pontos Chave:

• Ponto de Pivô: Por padrão, a rotação ocorre em torno do centro do elemento. Você pode mudar isso com a propriedade transform-origin, que veremos em uma lição futura.
• Contexto 3D: Para que rotateX(), rotateY() e rotate3d() tenham um efeito visual de profundidade, um elemento ancestral precisa ter a propriedade perspective definida.
• backface-visibility: Esta propriedade controla se o "verso" de um elemento é visível quando ele é girado em 3D.
• Unidades de Ângulo: deg (graus) é a mais comum, mas rad (radianos), grad (gradianos) e turn (voltas) também são válidas.

A função rotate() é essencial para criar interações visuais como animações de carregamento, transições de cards e efeitos de interface que adicionam dinamismo ao seu site.