Docs executáveis de CSS: Transform CSS

Q: O que o transform faz no CSS?

Muda como um elemento é desenhado: deslocado (translate), redimensionado (scale), girado (rotate) ou inclinado (skew). O elemento mantém o lugar original no layout, então os elementos em volta não se movem.

Q: Como aplicar vários transforms no CSS?

Liste-os em um único valor de transform, separados por espaços: transform: translateX(50px) rotate(20deg) scale(1.2);. Escrever uma segunda declaração transform substitui a primeira em vez de somar a ela.

O que o transform faz

transform muda como um elemento é desenhado: deslocado, redimensionado, girado ou inclinado. Os contornos tracejados abaixo mostram onde cada caixa estaria sem o transform:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) desloca a caixa azul 20px para o lado e 10px para baixo. scale(1.3) deixa a verde 30% maior em volta do centro. rotate(20deg) gira a âmbar no sentido horário, e skewX(-20deg) inclina a escura. Em todos os casos, o espaço tracejado, que é o lugar que o elemento ocupa no layout, fica exatamente onde estava.

Funções de transform

Função	Faz	Exemplo
`translate(x, y)`	desloca	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	desloca em um eixo	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	redimensiona (1 = original, 0.5 = metade, negativo espelha)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	redimensiona em um eixo	`scaleX(0.5)`
`rotate(angle)`	gira no sentido horário (negativo = anti-horário)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	inclina	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	tudo isso em uma matriz, quase sempre o que o navegador devolve
`none`	sem transform

As porcentagens em translate() são relativas ao tamanho do próprio elemento, não ao do pai. A rotação tem página própria, com graus, voltas e giro contínuo: rotate no CSS.

Playground de transform

Mexa nos controles deslizantes. A primeira linha é o valor de transform que você montou; a segunda é a matriz que o navegador calculou a partir dele, que é o que o getComputedStyle devolve para qualquer transform:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Transforms não mexem no layout

Um elemento com transform é desenhado em outro lugar, mas a página é montada como se ele não tivesse transform. Os vizinhos mantêm as posições. É isso que torna os transforms bons para efeitos de hover e animação: nada em volta é refeito.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

As duas caixas do meio parecem 1.5 vez maiores. A que usa scale fica por cima dos vizinhos e C não se move; a que cresceu com width e height empurra C 40px para o lado.

Vários transforms e a ordem deles

Coloque várias funções em um único transform, separadas por espaços. A ordem muda o resultado porque, lendo da esquerda para a direita, cada função trabalha no sistema de coordenadas deixado pelas funções anteriores:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

A caixa azul se deslocou 120px em linha reta e depois girou no lugar. A verde girou primeiro, então o "eixo x" dela aponta na diagonal, e translateX(120px) a desloca ao longo da diagonal. As mesmas funções, em um lugar diferente.

A outra armadilha: uma segunda declaração transform substitui a primeira. Se um card tem transform: rotate(-2deg) e a regra de hover diz transform: scale(1.05), a rotação some no hover. Repita as duas (rotate(-2deg) scale(1.05)) ou use as propriedades individuais abaixo.

transform-origin

Redimensionar, girar e inclinar acontecem em volta de um ponto fixo, a origem do transform, que por padrão é o centro. Mude com palavras-chave, comprimentos ou porcentagens:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

As três caixas giram 25 graus. A primeira gira em torno do meio, a segunda mantém o canto superior esquerdo preso ao canto do espaço reservado, a terceira o canto inferior direito. Um menu dropdown que cresce a partir do botão usa transform-origin: top com scale().

As propriedades translate, scale e rotate

Os navegadores modernos também têm três propriedades separadas que fazem o mesmo que as funções, mas podem ser definidas e animadas de forma independente:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Elas sempre se combinam como se estivessem escritas transform: translate(...) rotate(...) scale(...) antes de qualquer valor de transform, seja qual for a ordem em que você as declara. Repare na sintaxe: translate: 10px 20px e scale: 1.2 recebem os valores sem os parênteses de função.

Centralizar com translate(-50%, -50%)

Como as porcentagens de translate() se referem ao tamanho do próprio elemento, top: 50%; left: 50%; transform: translate(-50%, -50%) centraliza no pai um elemento absolute de qualquer tamanho. A página de como centralizar uma div compara isso com flexbox e grid.

Erros comuns

Duas declarações transform. A posterior vence por inteiro. Combine as funções ou use as propriedades rotate, scale e translate.
Aplicar transform em um elemento inline. Um <span> ou <a> simples ignora o transform. Transforme-o em inline-block.
Esperar que os vizinhos se movam. Transforms nunca mudam o layout. Para abrir espaço, mude width, margin ou gap.
Ordem errada das funções. rotate() antes de translate() desloca ao longo do eixo girado.
Surpresas com filhos position: fixed. Um elemento com transform vira o bloco que contém os descendentes com posição fixa, então um cabeçalho fixo dentro dele rola junto. Ele também cria um novo stacking context para o z-index.

Perguntas frequentes

O que o transform faz no CSS?

Muda como um elemento é desenhado: deslocado (translate), redimensionado (scale), girado (rotate) ou inclinado (skew). O elemento mantém o lugar original no layout, então os elementos em volta não se movem.

Como aplicar vários transforms no CSS?

Liste-os em um único valor de transform, separados por espaços: transform: translateX(50px) rotate(20deg) scale(1.2);. Escrever uma segunda declaração transform substitui a primeira em vez de somar a ela.

A ordem das funções de transform importa?

Sim. Lendo da esquerda para a direita, cada função trabalha nos eixos que as anteriores deixaram, então rotate(45deg) translateX(100px) move o elemento ao longo de um eixo girado, enquanto translateX(100px) rotate(45deg) o move em linha reta e depois o gira.

O que é transform-origin?

O ponto fixo em volta do qual acontecem o redimensionamento, a rotação e a inclinação. O padrão é o centro (50% 50%). transform-origin: top left faz um elemento crescer a partir do canto superior esquerdo, ou girar em volta dele.

Por que o transform não funciona no meu span?

Os transforms não se aplicam a elementos inline não substituídos, como um <span> ou <a> simples. Dê ao elemento display: inline-block ou block e o transform funciona.

Conceitos relacionados