Docs executáveis de CSS: Rotate CSS

Q: Como rotacionar um elemento no CSS?

Use transform: rotate(45deg); ou a propriedade separada rotate: 45deg;. Ângulos positivos giram no sentido horário e ângulos negativos no anti-horário, em volta do centro do elemento, a menos que você mude o transform-origin.

Q: Qual a diferença entre transform: rotate() e a propriedade rotate?

Elas desenham o mesmo resultado. A propriedade rotate é independente do transform, então uma regra de hover pode mudar scale ou translate sem remover a rotação, e cada uma pode ter a própria transition. Juntas, elas agem como transform: translate() rotate() scale(), seja qual for a ordem em que você as declara.

Q: Como rotacionar uma imagem 90 graus no CSS?

Acrescente transform: rotate(90deg); (ou rotate: 90deg;) ao img. A imagem mantém o espaço original no layout, então uma imagem em retrato girada para paisagem pode ficar por cima dos vizinhos; dê ao contêiner espaço para o tamanho girado.

Q: Como fazer um elemento girar sem parar no CSS?

Defina @keyframes spin { to { rotate: 360deg; } } e aplique animation: spin 1s linear infinite;. Use linear para a velocidade ficar constante, e deixe mais lento ou pare com prefers-reduced-motion: reduce.

Q: Como deixar um texto na vertical no CSS?

Para um rótulo vertical, writing-mode: vertical-rl costuma ser melhor que rotate(90deg), porque também muda o layout: o elemento ocupa espaço na vertical em vez de ficar por cima dos outros. Use rotate para pequenas inclinações decorativas.

Rotacionar um elemento

Dois jeitos, o mesmo resultado: a função rotate() dentro de transform, ou a propriedade rotate sozinha. Ângulos positivos giram no sentido horário:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

As caixas azul e verde estão giradas exatamente do mesmo jeito, 45 graus no sentido horário em volta do centro. A caixa âmbar tem um ângulo negativo, então inclina no sentido anti-horário. A rotação nunca mexe no layout: cada caixa continua ocupando o espaço original de 90 por 60, e é por isso que elementos girados podem ficar por cima dos vizinhos.

Unidades de ângulo

Unidade	Volta completa	90 graus
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg é a escolha comum; turn fica mais legível para giros (rotate: 1turn). Ângulos acima de 360 são permitidos e fazem diferença em animações: rotate(720deg) em um keyframe gira duas vezes. Escreva sempre a unidade: rotate(45) é inválido e ignorado.

Arraste o controle deslizante para ver um ângulo em cada unidade:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Girar em volta de um canto: transform-origin

Um elemento gira em volta do centro por padrão. O transform-origin muda o ponto de giro. O ponteiro de um relógio gira pela ponta, não pelo meio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

A ponta de baixo do ponteiro fica sobre o pino âmbar no centro do mostrador, e rotate: 120deg o leva até as quatro horas. Remova a linha do transform-origin e o ponteiro passa a girar em volta do próprio meio, fora do pino.

Rotacionar texto e rótulos verticais

Uma pequena inclinação com rotate serve para um badge ou um adesivo. Para um rótulo realmente vertical, o writing-mode é melhor, porque ele muda o layout: o elemento fica alto e estreito em vez de ficar por cima do que está ao lado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

O painel mostra o tamanho de layout de cada rótulo. O girado continua ocupando a caixa original, larga e baixa: deixa um vão vazio ao lado e sai para cima e para baixo da linha, invadindo o que estiver ali. O do writing-mode ocupa uma caixa alta e estreita. Acrescentar rotate: 180deg faz ele ser lido de baixo para cima, que é a direção comum de um rótulo vertical.

Girar um ícone no clique ou no hover

Girar uma seta 180 graus é o jeito padrão de mostrar que uma seção está aberta. Combine rotate com uma transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

O chevron é um quadrado com duas bordas, girado 45 graus para apontar para baixo. Quando o botão está expandido, ele vai para 225 graus, apontando para cima, e a transition anima a meia-volta. O atributo aria-expanded comanda o estilo, então o estado visual e o estado que os leitores de tela anunciam nunca discordam.

Um loader girando

Um giro é uma rotação de 0 a 360 graus, repetida com a função de tempo linear para a velocidade nunca mudar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Com só um keyframe to, a animação parte da rotação do próprio elemento (nenhuma) e termina em 360deg, e o infinite a repete sem salto porque 360deg fica igual a 0. Para quem pediu ao sistema movimento reduzido, o loader gira três vezes mais devagar. Mais sobre keyframes na página de animação.

Rotação 3D: rotateX, rotateY

rotateX() inclina um elemento para trás em volta do eixo horizontal, e rotateY() o gira em volta do eixo vertical, como uma porta. Sem perspectiva eles só parecem achatados; o perspective no pai acrescenta profundidade:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Para espelhar um elemento em vez de girá-lo, use scale: -1 1 (uma virada horizontal). Uma rotação de 180 graus o deixa de cabeça para baixo, o que não é a mesma coisa.

Erros comuns

Rotacionar um <span> ou <a> que não sai do lugar. Elementos inline simples ignoram transforms. Acrescente display: inline-block.
Uma rotação que some no hover. Uma regra de hover com transform: scale(1.1) substitui transform: rotate(...). Use as propriedades separadas rotate e scale, ou liste as duas funções.
Esperar que o layout abra espaço. Uma imagem girada mantém a caixa sem rotação e fica por cima dos vizinhos. Dê ao contêiner o tamanho girado, ou use writing-mode para texto.
Loaders com ease. A função de tempo padrão acelera e desacelera a cada volta. Use linear.
Girar em volta do ponto errado. Defina o transform-origin antes de ajustar o ângulo.

Perguntas frequentes

Como rotacionar um elemento no CSS?

Use transform: rotate(45deg); ou a propriedade separada rotate: 45deg;. Ângulos positivos giram no sentido horário e ângulos negativos no anti-horário, em volta do centro do elemento, a menos que você mude o transform-origin.

Qual a diferença entre transform: rotate() e a propriedade rotate?

Elas desenham o mesmo resultado. A propriedade rotate é independente do transform, então uma regra de hover pode mudar scale ou translate sem remover a rotação, e cada uma pode ter a própria transition. Juntas, elas agem como transform: translate() rotate() scale(), seja qual for a ordem em que você as declara.

Como rotacionar uma imagem 90 graus no CSS?

Acrescente transform: rotate(90deg); (ou rotate: 90deg;) ao img. A imagem mantém o espaço original no layout, então uma imagem em retrato girada para paisagem pode ficar por cima dos vizinhos; dê ao contêiner espaço para o tamanho girado.

Como fazer um elemento girar sem parar no CSS?

Defina @keyframes spin { to { rotate: 360deg; } } e aplique animation: spin 1s linear infinite;. Use linear para a velocidade ficar constante, e deixe mais lento ou pare com prefers-reduced-motion: reduce.

Como deixar um texto na vertical no CSS?

Para um rótulo vertical, writing-mode: vertical-rl costuma ser melhor que rotate(90deg), porque também muda o layout: o elemento ocupa espaço na vertical em vez de ficar por cima dos outros. Use rotate para pequenas inclinações decorativas.

Conceitos relacionados